用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;/*width的值要跟所有的li宽度总和一样*/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="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/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="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li> <li><a href="#"><img src="http://www.jb51.net/images/logo.gif" width="100"/></a></li></ul> </div> <button id="next">next</button></div> </body></html>大家可以直接复制上面的代码，保存成html测试。
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持脚本之家。
易网时代-编程资源站