之前在学习jQuery时,想做一个轮播图的demo,于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo,但是在演示的时候,最后一张到第一张图片切换到时候没有动画效果。之后尝试在最后多添加一个第一张图片,然后在展示这张图片时,默默的把其换成了真正的第一张图片,这样在切换的时候看不到痕迹。但是这样在第一张点击向前时,会出现两张一样的第一张图片。那么如何实现无缝滚动呢?
一、原理
实现原理是通过div的overflow:hide属性来显示单个图片,再不断的改变ul元素的左外边距动画显示每个图片,最关键的是这里,在将ul的第一个元素左移后,将其添加到ul的尾部然后删除,这样,当前显示的图片一直是第一张图片。
二、动手看看
html代码:
<div id="container">
<div id="content">
<ul class="photo">
<li class="Li"><img src="images/1.jpg"></li>
<li class="Li"><img src="images/2.jpg"></