原生javascript实现图片左右平滑轮播效果（思路分析+代码）
效果截图：思路：1准备工作1通过html和css实现图片水平布局（可以在main里面设置overflow=scrollleft，更好的观察图片移动的轨迹）2获取需要操作的对象3设置默认展示的图片的下标imgIndex=1默认的轮播按钮下标btnIndex=0初始的main的scrollLeftmain.scr...
效果截图：
思路：
1 准备工作
1 通过html和css实现图片水平布局（可以在main里面设置overflow=scrollleft，更好的观察图片移动的轨迹）
2 获取需要操作的对象
3 设置默认展示的图片的下标 imgIndex = 1
默认的轮播按钮下标 btnIndex = 0
初始的main的scrollLeft main.scrollLeft
2 效果1：图片切换 moveMent() 注意该调用需要放在其他效果代码后面进行调用
1 用dsq1实现图片的瞬间切换
2 判断当前图片的下标
如果大于图片数组的长度，则重置imgIndex = 2，从图片数组的第三张开始，即想要展示的第二张图片
3 调用含有dsq2的move运动函数，实现图片的缓慢切换
1 获取开始值和结束值,即每2张图片之间移动的距离
2 设置步长speed speed = (end-start)/20
3 判断两张图片之间是否切换完毕
记录两张图片切换需要走多少步num
此案例移动距离为600px,speed为20，则num=30
即定时器dsq2执行30次后，两张图片完成切换
4 实现图片自己轮播时，按钮背景色跟随图片的切换改变效果
3 效果2：点击li按钮时，切换到对应图片，并对应改变背景色
1 遍历li按钮数组，用for遍历时，注意用let声明
2 给li[i]设置点击事件 btnIndex=i imgIndex = i+1
3 调用move(),实现图片缓慢切换
4 遍历li按钮数组，清除背景色（注意HTML布局时，就给第一个Li默认背景样式）
5 给当前点击的li按钮设置背景色
4 效果3：鼠标移入，轮播停止；鼠标移出，轮播继续
1 onmouseover 清除定时器dsq1 轮播停止
2 onmouseout 创建定时器dsq1,调用moveMent()图片切换函数 轮播继续
5 效果4：点击右边按钮，显示下一张
给右边按钮绑定点击事件，调用moveMent()图片切换函数
6 效果5：点击左边按钮，显示上一张
1 给左边按钮添加点击事件
2 图片下标--
3 判断当前图片是否是第一张
1 如果是第一张，则重新赋值imgIndex=4，给main设置上一张图片的滚动距离
2 调用move()函数，
3 遍历li，清除lis[i]的背景色
4 li按钮下标--
5 判断li按钮下标，小于0时，重置btnIndex=4，到达第5个li
6 给当前li背景色
<style>
*{
margin: 0;
padding: 0;
/*除去左、右箭头的下划线*/
text-decoration: none;
}
.box{
width: 600px;
height: 400px;
border: 1px solid #000;
margin: 20px auto;
position: relative;
}
.main{
height: 400px;
width: 600px;
/* overflow: scroll; */
overflow: hidden;
}
.divImgs{
width: 4200px;
height: 400px;
}
.divImgs img{
width: 600px;
height: 400px;
float: left;
}
.arrow{
/*记得给宽高*/
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-block;
text-align: center;
font-size: 30px;
line-height: 30px;
position: absolute;
top: 46%;
font-weight: bold;
display: none;
}
.left{
left: 20px;
}
.right{
right: 20px;
}
.box:hover .arrow{
display: block;
}
ul{
position: absolute;
right: 20px;
bottom: 20px;
}
/*注意：这里不要写成.box li，不然会覆盖后续的.bg背景色，导致无法实现li按钮背景色跟随*/
ul li{
list-style-type: none;
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
margin: 0 1px;
background-color: aliceblue;
font-size: 12px;
text-align: center;
line-height: 15px;
}
.bg{
background-color: skyblue;
}
</style><div class="box">
<div class="main">
<div class="divImgs">
<img src="./img/5.jpg">
<img src="./img/1.jpg">
<img src="./img/2.jpg">
<img src="./img/3.jpg">
<img src="./img/4.jpg">
<img src="./img/5.jpg">
<img src="./img/1.jpg">
</div>
</div>
<a href="javascript:;" class="arrow left"><</a>
<a href="javascript:;" class="arrow right">></a>
<ul>
<li class="bg">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><script>
var box = document.querySelector('.box')
var main = document.querySelector('.main')
var divImgs = document.querySelector('.divImgs')
var lis = document.querySelectorAll('li')
var imgs = document.querySelectorAll('img')
var btnLift = document.querySelector('.left')
var btnRight = document.querySelector('.right')
//两个定时器
var dsq1,dsq2;
//单个图片的长度，为后续移动路程的计算做准备
var imgW = imgs[0].offsetWidth
//第一张显示的图片下标
var imgIndex = 1
//默认的按钮下标
var btnIndex = 0
//初始的main的scrollLeft值 600px
main.scrollLeft = imgW*imgIndex
//效果1：图片切换
function moveMent(){
//从第2张图片开始递增
imgIndex++
//当下标大于图片数量时，从第三张图片开始
if(imgIndex>6){
imgIndex = 2
//给main设置上一张图片的滚动距离
main.scrollLeft = imgW*(imgIndex-1)
}
move()
//这里实现图片自己轮播时，按钮背景色跟随图片的切换改变
for(var i = 0;i<lis.length;i++){
lis[i].className=''
}
//按钮下标
btnIndex++
//有5个点，下标最大为4
if(btnIndex>4){
btnIndex=0
}
lis[btnIndex].className='bg'
}
//效果2：点击按钮时，切换到对应图片，并对应改变背景色
for(let i = 0;i<lis.length;i++){
lis[i].onclick = function(){
//注意点：按钮下标和图片数组下标的关系
btnIndex=i
imgIndex = i+1
move()
for(let j=0;j<lis.length;j++){
lis[j].className=''
}
lis[btnIndex].className='bg'
}
}
//效果3：鼠标移入，轮播停止；鼠标移出，轮播继续
btnRight.onmouseover = function(){
clearInterval(dsq1)
}
btnLift.onmouseout = function(){
dsq1 = setInterval(moveMent,3000)
}
//效果4：点击右边按钮，显示下一张
btnRight.onclick = function(){
moveMent()
}
//效果5：点击左边按钮，显示上一张
btnLift.onclick = function(){
imgIndex--
if(imgIndex<0){
imgIndex = 4
//给main设置上一张图片的滚动距离
main.scrollLeft = imgW*(imgIndex+1)
}
move()
//先去除li对象中class属性值
for(var i=0;i<lis.length;i++){
lis[i].className=''
}
btnIndex--
if(btnIndex<0){
btnIndex=4
}
lis[btnIndex].className='bg'
}
//调用moveMent函数,设置图片3秒切换一次
//注意该调用需要放在其他效果代码后面
dsq1 = setInterval(moveMent,3000)
实现图片的缓慢切换的move()函数如下：
function move(){
//获取开始值和结束值,指每2张图片之间移动的距离
var start = main.scrollLeft
var end = imgIndex*imgW
var speed = (end-start)/20//speed=30
//num为步数，宽度为600px,speed为30，则走完需要20步
var num = 0
clearInterval(dsq2)
dsq2 = setInterval(function(){
num++
if(num == 20){
clearInterval(dsq2)
main.scrollLeft = end
}else{
start += speed
main.scrollLeft = start
}
//注意dsq2的时间和dsq1时间的大小，dsq2的时间间隔不能太大
},30)
}
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)