首先第一步，下載好一個jquery庫的插件，jquery.js網(wǎng)上很多隨處可以下載．下載的插件要放在目錄下．然后在html文檔中鏈接好<scripttype="text/javascript"src="jQuery.js"></script>

第二步，布局好一個DIV,如：

<divid="scroll">

 <pclass="subl">上一張<p/>

 <pclass="subr">下一張<p/>

 <ul>

  <listyle="background:red;display:block;"></li>

//上面的ｌｉ要設(shè)定為顯示，因?yàn)槭堑谝粡垐D片．

  <listyle="background:green;"></li>

  <listyle="background:gray;"></li>

  <listyle="background:orange;"></li>

 </ul>

 </div>

第三步，就到了寫CSS的時候了．下面的CSS懂基礎(chǔ)的人都看得懂．

#scroll{width:100%;height:180px;background-color:white;position:relative;border-bottom:1pxsolidgray;}//這里是給整個大的ＤＩＶ設(shè)定屬性．

#scrollul{height:180px;list-style:none;}//ＤＩＶ下的ＵＬ屬性．

#scrollulli{width:100%;height:180px;margin:0px;padding:0px;display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ屬性．注意：display:none;因?yàn)橐獙⑺械模欤殡[藏了先．當(dāng)點(diǎn)擊的時候在顯示出來．

 .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;}//上一張按鈕的屬性．注意一個絕對定位。

第四步，就是ｊｑｕｅｒｙ代碼了！也很簡單．先將代碼看一遍，你就會用了！

<scripttype="text/javascript">

/*輪播*/

 $(function(){

 vari=0;

 varlen=$("#scrollulli").length-1;

 $(".subl").click(function(){

  if(i==len){

i=-1;

}

i++;

$("#scrollulli").eq(i).fadeIn().siblings().hide();

 });

//到這里分開！上面的是上一張點(diǎn)擊的效果代碼，下面的是下一張點(diǎn)擊的效果代碼．

 $(".subr").click(function(){//獲取類名的點(diǎn)擊事件．

  if(i==0){

i=len+1;

}

i--;

$("#scrollulli").eq(i).fadeIn().siblings().hide();

 });

 });

 /*輪播*/

</script>

四步輕松搞定一個簡單的輪！