话说轮播图效果是前端er学习JS的必经之路啊，很多同学写的第一个JS效果应该就是它了，在各大网站我们都会经常见到，但是无缝滚动运动效果的轮播图，对于小白们来说还是有一定难度的。
我们来看看思路吧~
首先我们要实现的效果有以下几点：
小圆点：点击小圆点显示与之对应的图片
向左和向右按钮：点击向左按钮图片向后运动，点击向右按钮图片向前运动
定时器：每隔 2s 自动播放
主要难点在于：
当图片运动到最后一张，点击向右的按钮时，应该显示第一张；
当前显示的是第一张，点击向左的按钮时，应该显示最后一张；
思路：
1、先将第一张图片复制 添加到 ul 最后面，将最后一张图片复制 添加到 ul 最前面（此时 ul 的第一张图片是pic3，最后一张图片是pic0）；
2、当图片(ul)运动到pic3，继续向前运动，运动到最后一张pic0时，瞬间把 ul 拉回到第二张图片pic0的位置，然后在继续向前运动；
3、当图片(ul)向后运动到第一张图片pic3时，瞬间把 ul 拉回到倒数第二张图片pic3的位置。
4、还有非常关键的一点：定义iNow变量，用于对应当前显示的图片与ol中的小圆点，并且可以用来关联 ul 的位置。
html代码：
<div id="tab">
<ul>
<li><img src="image/pic0.jpg" alt="" /></li>
<li><img src="image/pic1.jpg" alt="" /></li>
<li><img src="image/pic2.jpg" alt="" /></li>
<li><img src="image/pic3.jpg" alt="" /></li>
</ul>
<ol>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ol>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="prev" id="prev"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" class="next" id="next">></a>
</div>
css代码：
*{margin: 0; padding: 0;}
li{ list-style: none;}
#tab{
width: 670px;
height: 240px;
border: 1px solid #ccc;
margin: 50px auto;
position: relative;
}
#tab ul{
width: 2680px;
height: 240px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
#tab ul li{
float: left;
width: 670px;
}
#tab ul li img{
width: 670px;
}
#tab ol{
width: 80px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -40px;
overflow: hidden;
}
#tab ol li{
float: left;
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
margin: 5px;
cursor: pointer;
}
#tab ol .on{
background: #f00;
}
#tab .prev,#tab .next{
display: none;
width: 40px;
height: 60px;
background: rgba(0,0,0,.3);
filter:alpha(opacity:30);
text-decoration: none;
text-align: center;
line-height: 60px;
font-size: 30px;
color: #fff;
position: absolute;
top: 50%;
margin-top: -30px;
}
#tab .prev{
left: 0;
}
#tab .next{
right: 0;
}
内容版权声明：除非注明，否则皆为本站原创文章。