jQuery图片左右滚动代码 有左右按钮实例

时间：2021-05-26

用jquery封装了一个控制图片左右滚动的插件，有左右按钮可以点击实现图片滚动效果。

代码如下：

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>slide</title><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script><br><style>* { padding:0; margin:0; list-style: none}img{ border: none}#img-slider, #img-slider-2 { position: relative; width: 560px; height: 80px;}.slider-wrap { width: 480px; overflow: hidden; position: relative; height: 150px; margin-left: 40px;}.slider-wrap ul { zoom: 1; position: absolute; left: 0; top: 0; width: 9999px;}.slider-wrap ul li { float: left; width: 120px; text-align: center; padding: 5px 0;}#prev, #next { position: absolute; top: 30px; left: 0px; width: 40px}#next { left: auto; right: 0px}</style><br><script type="text/javascript">$(function () { $("#img-slider").imgScroll(); $("#img-slider-2").imgScroll(); }); (function ($) { $.fn.imgScroll = function () { var isDone = false, scrollBox = $(this), prevBtn = scrollBox.find("#prev"), nextBtn = scrollBox.find("#next"), imgBox = scrollBox.find("ul"), next_over = imgBox.find("li").width() * imgBox.find("li").length, slide_width = $(".slider-wrap").width(); return this.each(function(){ function setOpacity() { imgBox.animate({ opacity: 1 }, 800,function(){ isDone = false; }) } function scrollNext() { if(!isDone && next_over + parseInt(imgBox.css("left"),10) > slide_width){ isDone = true; imgBox.animate({ left: "+=" + "-" + slide_width, opacity: 0.5 }, 800, setOpacity); } //isDone = false } function scrollPrev() { if(!imgBox.is(':animated') && parseInt(imgBox.css("left"),10) !=0){ imgBox.animate({ left: "+=" + slide_width,//不断左移 opacity: 0.5 }, 800, setOpacity); } } prevBtn.bind('click', scrollPrev); //向前滚动 nextBtn.bind('click', scrollNext); //向后滚动 }) }})(jQuery);</script></head> <body><div id="img-slider"> <button id="prev">prev</button> <div class="slider-wrap"> <ul> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> </ul> </div> <button id="next">next</button></div> <div id="img-slider-2"> <button id="prev">prev</button> <div class="slider-wrap"> <ul> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="https:///images/logo.gif" width="100"/></a></li> </ul> </div> <button id="next">next</button></div> </body></html>

大家可以直接复制上面的代码，保存成html测试。

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章