原生JavaScript实现轮播图

---恢复内容开始---

实现原理

原生JavaScript实现轮播图

通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果

HTML:

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <link rel="stylesheet" type="text/css" href="StyleSheet.css"> 6 <title></title> 7 </head> 8 <body> 9 <div id="scroll" class="scroll"> 10 <div id="box" class="box"> 11 <ul id="ul" style="left:-950px;"> 12 <li><img src="images/top_banner_bw01.jpg" width="950" height="438"></li> 13 <li><img src="images/top_banner_bw02.jpg" width="950" height="438"></li> 14 <li><img src="images/top_banner_bw03.jpg" width="950" height="438"></li> 15 <li><img src="images/top_banner_bw04.jpg" width="950" height="438"></li> 16 <li><img src="images/top_banner_bw05.jpg" width="950" height="438"></li> 17 </ul> 18 <ol id="olnavi"></ol> 19 </div> 20 <div id="last"></div> 21 <div id="next"></div> 22 </div> 23 <script src="a.js"></script> 24 </body> 25 </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwsyyj.html