js实现从左向右滑动式轮播图效果
轮播图就是让图⽚每隔⼏秒⾃动滑动，达到图⽚轮流播放的效果。轮播图从效果来说有滑动式的也有渐⼊式的，滑动式的轮播图就是图⽚从左向右滑⼊的效果，渐⼊式的轮播图就是图⽚根据透明度渐渐显⽰的效果，这⾥说的是实现第⼀种效果的⽅法。
原理
相同⼤⼩的图⽚并成⼀列，但只显⽰其中⼀张图⽚，其余的隐藏，通过修改left值来改变显⽰的图⽚。
html部分
nav为总容器，第⼀个ul列表#index为⼩圆点列表，⿏标覆盖哪个⼩圆点就显现第⼏张图⽚，on是⼀个给⼩圆点添加背景颜⾊属性的类；第⼆个ul列表#img为图⽚列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Figure</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<!--从左向右滑动-->
<nav>
<ul id="index">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="img">
<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>
css部分
图⽚尺⼨均为720*405，这⾥需要注意以下⼏点：js简易轮播图代码
ul#img列表相对于nav是绝对定位的，#img的长度必须设置为所有图⽚的总宽度，这样图⽚才可以并列⼀排显⽰；
总容器nav的宽度必须设置为图⽚的宽度720px，即只能显⽰⼀张图⽚，超出宽度的部分隐藏，即overflow: hidden；
⼩圆点列表应该在图⽚列表上⾯显⽰，故设置#img的z-index：-1；
⼩圆点列表是由⼀系列的li通过改变边框样式构成，故只需改变背景颜⾊即可达到移动⼩圆点的效果。
*{
margin:0;
padding:0;
}
nav{
width: 720px;
height: 405px;
margin:20px auto;
overflow: hidden;
position: relative;
}
#index{
position: absolute;
left:320px;
bottom: 20px;
}
#index li{
width:8px;
height: 8px;
border: solid 1px gray;
border-radius: 100%;
background-color: #eee;
display: inline-block;
}
#img{
width: 3600px;/*不给宽⾼⽆法移动*/
height: 405px;
position: absolute;/*不定义absolute，js⽆法设置left和top*/
z-index: -1;
}
#img li{
width: 720px;
height: 405px;
float: left;
}
#index .on{
background-color: black;
}
JS部分
图⽚移动函数moveElement()
moveElement函数需要获取图⽚现在的位置以及⽬标位置并计算它们之间的差距进⾏移动，可以⽤offse
tLeft和offsetTop获取图⽚现在的位置。图⽚移动时“划过”的效果是将距离分成好10次进⾏移动，即利⽤setTimeOut函数，然⽽为了防⽌⿏标悬停，需调⽤clearTimeout()函数，代码如下：
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
var x_pos=ele.offsetLeft;
var y_pos=ele.offsetTop;
var dist=0;
vement){//防⽌悬停
vement);
}
if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
return;
}
il(Math.abs(x_final-x_pos)/10);//分10次移动完成
x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
il(Math.abs(y_final-y_pos)/10);//分10次移动完成
y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
ele.style.left=x_pos+'px';
p=y_pos+'px';
moveElement(ele,x_final,y_final,interval);
},interval)
}
⼩圆点移动函数moveIndex()
移动⼩圆点的实质是移动设置的背景颜⾊的类on，原理是先判断哪个li上有背景颜⾊，有则去掉，让所有的li都没有背景，然后在对当前的li添加背景。
function moveIndex(list,num){//移动⼩圆点
for(var i=0;i<list.length;i++){
if(list[i].className=='on'){//清除li的背景样式
list[i].className='';
}
}
list[num].className='on';
}
图⽚⾃动轮播
将以下代码直接写在load中即可。
这⾥需要定义⼀个变量index，表⽰移动到第index（0~n-1，n为li的个数）张图⽚。
var ElementById('img');
var ElementById('index').getElementsByTagName('li');
var index=0;//这⾥定义index是变量，不是属性
var nextMove=function(){//⼀直向右移动，最后⼀个之后返回
index+=1;
if(index>=list.length){
index=0;
}
moveIndex(list,index);
moveElement(img,-720*index,0,20);
};
图⽚的⾃动轮播需要⽤到setInterval()函数，让程序每隔⼏秒⾃动调⽤nextMove()函数：
var play=function(){
timer=setInterval(function(){
nextMove();
},2500);
};
⿏标覆盖⼩圆点效果
要实现⿏标覆盖哪个⼩圆点，就呈现出对应的图⽚这⼀效果，需要知道⿏标覆盖的是哪个⼩圆点，这⾥给每个li都添加⼀个⾃定的属性index，使该属性的值为对应的⼩圆点的序号i(0~n-1，n为li的个数)，这样每次⿏标覆盖时只需获取index属性的值即可知道⿏标覆盖的是哪个⼩圆点。注意，该index属性和变量index没有丝毫的关系，只有相同的名字。
for(var i=0;i<list.length;i++){//⿏标覆盖上哪个⼩圆圈，图⽚就移动到哪个⼩圆圈，并停⽌
list[i].index=i;//这⾥是设置index属性，和index变量没有任何联系
list[i].onmouseover= function () {
var clickIndex=parseInt(this.index);
moveElement(img,-720*clickIndex,0,20);
index=clickIndex;
moveIndex(list,index);
clearInterval(timer);
};
list[i].onmouseout= function () {//移开后继续轮播
play();
};
}
总结
轮播图的实现并不复杂，主要在于将图⽚的移动⾏为和⼩圆点的移动⾏为分开，这样就⽐较容易实现。这个轮播图其实还是有点问题的，从最后⼀幅图滑向第⼀个时滑动的距离较长，其实也很好解决，将滑动的⽅式改⼀下，这⾥是根据-720*index来计算最终的left值，⽽index是将图⽚的移动和⼩圆点的移动绑到⼀起，将滑动⽅式改成现在的offsetLeft+（-720），图⽚的移动就可以与index值⽆关，然后在html⽂件增加⼀幅图⽚：
<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
<li><img src="../images/img1.jpg" alt="img1"></li>
然后在滑到最后⼀幅图⽚时，迅速的将偏移量赋值0，变成第⼀幅，两幅图⼀样，⽆法分辨其中变化，即可达到⽆缝连接。
if(x_pos==-3600){
ele.style.left='0';
p='0';
}else{
ele.style.left=x_pos+'px';
p=y_pos+'px';
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。