JavaScript使用改变scrollLeft的值做轮播图效果

前言

今天学了一个使用scrollLeft改变溢出的值的方法做的轮播图，没有做全只做了轮播的效果，自己觉得这个轮播图并不好用（也是我菜），内容不多就不一步步讲解了，不懂得可以看看注释

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link rel="stylesheet" href="../2.CSS/reset.css"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 520px;height: 280px;margin: 50px auto;}.inner {width: 520px;height: 280px;overflow: hidden;}.son {width: 3120px;height: 280px;}.son img {float: left;}.yuanq {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);}.yuanq li {width: 25px;height: 8px;background-color: #ccc;float: left;margin-left: 14px;}.yuanq li.active {background-color: #fff;}</style>
</head><body><div class="box"><div class="inner"><div class="son"><img src="./0.jpg" alt=""><img src="./1.jpg" alt=""><img src="./2.jpg" alt=""><img src="./3.jpg" alt=""><img src="./4.jpg" alt=""><img src="./0.jpg" alt=""></div><ul class="yuanq"><li class="active"></li><li></li><li></li><li></li><li></li></ul></div></div><script>// 定时器let js = nulllet js2 = null// 图片下标默认为0let x = 0let imgs = document.querySelectorAll('img')let imgdiv = document.querySelector('.inner')let lis = document.querySelectorAll('li')let box = document.querySelector('.box')function lunb() {js = setInterval(function() {// 每执行一次让图片下标+1x++// 图片到最后一张时让他跳到第一张if (x > imgs.length - 1) {x = 0// 因为常规做法，在让它从最后一张跳转到第一张时，需要图片倒退回去，这个效果很不好，可以用一个方法在把第一张图片在复制一份添加到最后一张图片的后面// 让最后一张图片有动画的滑动到“伪”第一张，在让它从“伪”第一张没有动画的跳转到第一张// 这个过程其实是做了两次图片更换，只是看不出来// 所以这里需要将imgdiv.scrollLeft的值直接改为0,让他没有动画的跳转到第一张// (这个方法与常规左右滑动轮播图类似)imgdiv.scrollLeft = 0;}// 起始步数let step = 0// 最大步数let maxStep = 20// 开始的位置 let statr = imgdiv.scrollLeft// 结束的位置let end = imgs[0].offsetWidth * x// 每一步的步长let everyStep = (end - statr) / maxStep// 走的每一步的定时器js2 = setInterval(function() {step++if (step >= maxStep) {step = 0clearInterval(js2)}// 让开始的位置累加每一步走的距离statr += everyStep// 最后将得到的距离赋给超出的距离imgdiv.scrollLeft = statr}, 15)//  判断下面的小长条跟着图片的变化而样式变化for (let i = 0; i < lis.length; i++) {lis[i].className = ''}lis[x].className = 'active'}, 1000)}lunb()// 鼠标经过轮播暂停box.onmouseover = function() {clearInterval(js)}// 鼠标离开继续播放box.onmouseleave = function() {lunb()}</script>
</body></html>

鼠标点击切换图片和左右切换没有做，不太会

JavaScript使用改变scrollLeft的值做轮播图效果相关推荐

利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
html动态轮播效果怎么做,详解JavaScript实现动态的轮播图效果
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之 ...
HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
html5轮播怎么自动换图,如何使用JavaScript实现“无缝滚动自动播放”轮播图效果...
在一些项目开发中,我们经常需要使用到轮播图,但是没有深入学习的情况下做轮播图是非常困难的. 思路分成小问题来解决 1. 动态生成序号12345 页面有多少li(图片),就有多少序号 2. 点击序号. ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...

JavaScript使用改变scrollLeft的值做轮播图效果

前言

JavaScript使用改变scrollLeft的值做轮播图效果相关推荐

最新文章

热门文章