jQuery插件实现左右无缝轮播
前段时间学习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{
width:50%;
height:350px;
overflow: hidden;
position: relative;
}
#tu .tu1 ul li img{
height:380px;
width:100%;
}
#tu .hd{
width:100px;
position:absolute;
right:37%;
bottom:20px;
}
#tu .hd ul li{
border-radius:50%;
float:left;
width: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;
width: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/ 可以自行前去下载该插件进行使用。
