原生js和jquery实现图片轮播特效

(1)第一部分是页面的结构

为了我的左右切换

1.首先，它是一个外围部分(事实上，它是最外面的整个包装)

2.然后是你设置图片转盘的地方(也就是一个横幅)

3.然后是一个图片组(你可以使用新的div或者直接使用ul - li格式)

4.然后是图片两端的左右箭头。5.然后有一个透明的背景层，放在图片的底部

6.然后是图片描述信息层，它位于透明背景层(div或ul - li)的左下角

7.然后是按钮层，用来定位图片组的索引，放在透明背景层的右下角(div或者ul - li)

因此，可以首先构建html结构

div id='包装'！-最外面的部分- div id='banner '！-旋转木马零件-ul class=' imglist '！-图片部分-lia href=' #' img src=' http3360。/img/test 1 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boots 1 '/a/lilia href=' # ' img src=' http 3360 test 2 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boots 2 '/a/Li lia href=' # ' img src=' http 3360。/img/test 3 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boots 3 '/a/Li lia href=' # ' img src=' http :/img/test4 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boots 4 '/a/Li lia href=' # ' img src=' http :/img/test 5 . jpg ' width=' 400 px ' height=' 200 px ' alt=' puss in boot S5 '/a/Li/ul img src=' http :/img/prev . png ' width=' 20px ' height=' 40px ' id=' prev ' img src=' http :/img/next . png ' width=' 20px ' height=' 40px ' id=' next ' div class=' BG '/div！-图片底部的背景层- ul class='infoList '！-图片左下角的文本信息-Li class=' infoon ' boot 1中的pus/Li boot 2中的lipus/Li boot 3中的lipus/Li boot 4中的lipus/Li boot 5中的lipus/Li/ul class='索引列表'！-图片右下角的序列号-Li class=' index on ' 1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li/ul/div/div与上一张相比，知识中增加了两个箭头img标签

(2)CSS样式部分(图片组的处理)不同于淡入淡出样式

淡入淡出只需要显示或隐藏对应序号的图片，可以通过显示直接设置

左右切换模式是使用图片li浮动，父层元素ul的总宽度为图片总宽度，设置为隐藏有限横幅宽度下超出宽度的部分

然后，当您想要切换到具有某个序列号的图片时，使用其ul定位左样式来设置相应的属性值

比如第一张图片的初始定位是0px，如果要显示第二张图片，需要left:-400px处理

style type='text/css' body，div，ul，li，a，img { margin 3360 0；padd : 0；} ul，Li { list-style : none；} a { text-decoration : none；} # wrapper { position : relative；margin: 30px自动；宽度： 400 px；高度： 200 px；} #横幅{p