jQuery利用箭头控制文字内容左右滚动代码

发布时间：2018-08-15 11:22:51 所属栏目：Unix 来源：站长网

导读：一款简单的 jQuery 滚动代码，利用箭头控制文字内容左右滚动，作者只是实现了一个雏形，如果您想使用，可以在此基础进行扩展，可以扩展的内容包括：图片、图文混排、仅文字等，如您有什么疑问可以在下边留言，我们将尽快回复。为解决一些网页特效运行后不

　　一款简单的jQuery滚动代码，利用箭头控制文字内容左右滚动，作者只是实现了一个雏形，如果您想使用，可以在此基础进行扩展，可以扩展的内容包括：图片、图文混排、仅文字等，如您有什么疑问可以在下边留言，我们将尽快回复。

　　为解决一些网页特效运行后不能显示效果（例如：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="/uploads/common/js/jquery-1.4.2.min.js"></script> <script>!window.jQuery && document.write('<script src="/uploads/common/js/jquery-1.4.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><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!