前段时间学习jQuery的时候,在网上找了个SuperSlide插件,做轮播图demo,感觉对于新人而言,还是挺容易上手的,代码量也少。
直接贴代码吧。
1、HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script> <title></title> <link rel="stylesheet" href="css/lunbo.css" /> </head> <body> <!--tu start--> <div id="tu"> <div class="tu1"> <a class="prev"><</a> <a class="next">></a> <ul> <li><a href="###"><img src="images/main01.jpg"></a></li> <li><a href="###"><img src="images/main02.jpg"></a></li> </ul> </div> <div class="hd"> <ul> <li></li> <li></li> </ul> </div> </div> <script type="text/javascript"> jQuery("#tu").slide({mainCell:".tu1 ul",effect:"leftLoop",autoPlay:true}); </script> <!--tu end--> </body> </html>
2、CSS
*{ margin:0; padding:0; } ul li{ list-style: none; } /*tu start*/ #tu{ 50%; height:350px; overflow: hidden; position: relative; } #tu .tu1 ul li img{ height:380px; 100%; } #tu .hd{ 100px; position:absolute; right:37%; bottom:20px; } #tu .hd ul li{ border-radius:50%; float:left; 14px; height:14px; line-height:18px; margin-right:5px; background:#FFFFFF; text-align:center; cursor:pointer; } #tu .hd ul li:hover{ background:#DF483F; } #tu .hd ul li.on{ background:#DF483F; } #tu .prev,#tu .next{ display: block; 50px; height:50px; line-height:50px; background:#EEE; text-align: center; font-family: "宋体"; font-size:50px; color:#AAA; } #tu .prev:hover,#tu .next:hover{ opacity:0.5; } #tu .prev{ position:absolute; left:50px; top:130px; z-index:100; cursor:pointer; /*鼠标指针变成 手 的形状*/ } #tu .next{ position:absolute; right:50px; top:130px; z-index:100; cursor:pointer; } /*tu end*/
3、注意:因为SuperSlide是基于jQuery的插件,所以前提必须先引用jQuery,再引用SuperSlide 。 SuperSlide的网址是:http://www.superslide2.com/ 可以自行前去下载该插件进行使用。