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 id="btn_l" class="btn"><</div>  <div class="wrap"><div 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 id="btn_r" class="btn">></div> </body></html>

上一篇：JS网址自动补全实例代码

下一篇：百度龙年首页中国龙代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注