jQuery 內容左右切換效果

2024-09-05 12:18:17

字體：大中小

來源：轉載

供稿：網友

jQuery內容左右滑動輪換效果，內容切換功能，點擊左右小箭頭就可以輪換。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>jquery內容左右切換效果</title><style type="text/css">.wrap {float:left; position:relative; width:247px; height:150px; z-index:1; overflow:hidden;}.cc {height:140px; position:absolute; top:0px; left:-494px; z-index:2;overflow:hidden}.btn {float:left; width:11px; margin-top:70px; z-index:3}  .cc p.con {width:238px; height:135px; background:#ffecc4}</style><script src="/ajaxjs/jquery-1.6.2.min.js"></script><script>!window.jQuery && document.write('<script src="/ajaxjs/jquery-1.6.2.min.js"><//script>');</script><script type="text/javascript"">     $(document).ready(function(){          var leftsize = -494;          $("#btn_l").click(function(){			if(leftsize > -247){			   leftsize = leftsize - 247;               $(".cc").animate({"left":leftsize});			   }			else if(leftsize = -247) {			   leftsize = leftsize - 247;               $(".cc").animate({"left":leftsize});			}			else {$(".cc").css('left','0px');}        });            $("#btn_r").click(function(){   			if(leftsize < -247){			   leftsize = leftsize + 247;               $(".cc").animate({"left":leftsize});			   }			else if(leftsize = -247) {			   leftsize = leftsize + 247;               $(".cc").animate({"left":leftsize});			}			else{$(".cc").css('left','-494px');}       });       });      </script>  </head> <body> <div   class="iwvjtn8m0"   id="btn_l" class="btn"><</div>  <div   id="iwvjtn8m0"   class="wrap"><div   id="iwvjtn8m0"   class="cc" style="width:741px;"><div style="float:left;width:241px;padding:5px 3px;"><p class="con">111</p></div><div style="float:left;width:241px;padding:5px 3px; "><p class="con">222</p></div><div style="float:left;width:241px;padding:5px 3px; "><p class="con">333</p></div></div></div> <div   class="iwvjtn8m0"   id="btn_r" class="btn">></div> </body></html>

上一篇：JS網址自動補全實例代碼

下一篇：百度龍年首頁中國龍代碼