原生原生JS实现图片无缝滚动方法实现图片无缝滚动方法(附带封装的运动框架附带封装的运动框架)
话说轮播图效果是前端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;