<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝无缝滚动</title> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/86/kvgydkne/bannerslider.css"> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; } .slider{ width: 520px; height: 280px; } .slider1{ width: 100%; height: 300px; color: #fff; } .slider1 .play{ height: 100%; } .slider1 li{ text-align: center; height: 100%; font-size: 100px; line-height: 300px; } .slider2{ margin: 30px auto; } </style> </head> <body> <div class="slider slider1"> <ul class="play"> <li style="background: #c91520">1</li> <li style="background: #ea8616">2</li> <li style="background: #9ab22e">3</li> <li style="background: #e6db5a">4</li> <li style="background: #272822">5</li> </ul> <span class="next iconfont" >></span> <span class="prev iconfont" ><</span> </div> <div class="slider slider2"> <ul class="play"> <li><img src="http://cd.xcabc.com/images/zixun/001.jpg" alt="\" width="520" height="280"></li> <li><img src="http://cd.xcabc.com/images/zixun/001.jpg" alt="\" width="520" height="280"></li> <li><img src="http://cd.xcabc.com/images/zixun/001.jpg" alt="\" width="520" height="280"></li> <li><img src="http://cd.xcabc.com/images/zixun/001.jpg" alt="\" width="520" height="280"></li> <li><img src="http://cd.xcabc.com/images/zixun/001.jpg" alt="\" width="520" height="280"></li> </ul> <span class="next iconfont" >></span> <span class="prev iconfont" ><</span> </div> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/86/kvgydkne/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/86/kvgydkne/bannerslider.js"></script> <script type="text/javascript"> $(function(){ $('.slider1').Slider({ $elem: $('.slider1') }); $('.slider2').Slider({ $elem: $('.slider2') }); }) </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 仿淘宝无缝滚动 喜欢 (0)or分享 (0)
