一般的图片轮播切换实现起来并不难,瞬间切换的轮播只需在点击按钮时先让所有的图片隐藏,再让对应索引的图片显示,难点在于平移类型的轮播,在最后一张,第一张图片继续切换时,我们看起来图片就是首尾相连的,但实际上我们并不能把图片真的首尾相连,这只能靠我们自己来实现首尾相连的视觉效果。
1.比如有5张图片轮播,我们可以将第一张图片复制一份到最后,最后一张图片复制到第一张之前,这样在最后一张图片继续平移时,看起来实现了循环,但接下来就出现空白了,我们可以继续复制图片,但我们总不能为了多次循环而复制多次,因此我们可以在最后一张向所谓的第一张平移完成后立即将图片列表的位置切换到真正的第一张图的位置,用户还没来得及点击右键头,图片就已经偷天换日了。点击另一个反向的键头时反之。这样便实现了所谓的无缝轮播。
2.方式一的代码总显得冗余,明明只有5张图,却还要多写两条图片的代码。我们对首尾图片的处理可以是:每平移一次结束后就立即将第一张图片调到最后,这里我们利用数组,
<style>
ul,li{
list-style:none;margin:0;padding:0;}
img {
width:200px;}
li{
float:left;position:relative;}
#Toggle_box{
width:200px;position:relative;margin:auto;overflow:hidden;}
#pic_list{
width:1000px;position:relative;left:-200px;}
.Arrow