#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的ＤＩＶ设定属性． #scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ属性． #scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来． .subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性．注意一个绝对定位． .subr{ position:absolute; bottom:20px; right:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; }//下一张按钮的属性．注意一个绝对定位． .subr:hover{ background:yellow;border-radius:10px;} .subl:hover{ background:yellow;border-radius:10px;} //以上两个hover是鼠标经过的效果．
第四步，就是ｊｑｕｅｒｙ代码了！也很简单．先将代码看一遍，你就会用了！
<script type="text/javascript"> /*轮播*/ $(function(){ var i=0; var len=$("#scroll ul li").length-1; $(".subl").click(function(){ if(i==len){ i=-1; } i++; $("#scroll ul li").eq(i).fadeIn().siblings().hide(); }); //到这里分开！上面的是上一张点击的效果代码，下面的是下一张点击的效果代码． $(".subr").click(function(){//获取类名的点击事件． if(i==0){ i=len+1; } i--; $("#scroll ul li").eq(i).fadeIn().siblings().hide(); }); }); /*轮播*/ </script>
四步轻松搞定一个简单的轮！