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

2019-11-20 09:39:31

字体：大中小

来源：转载

供稿：网友

用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="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/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="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>   <li><a href="#"><img src="//www.VeVB.COm/images/logo.gif" width="100"/></a></li>  </ul> </div> <button id="next">next</button></div> </body></html>

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

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

上一篇：jQuery获取多种input值的简单实现方法

下一篇：JavaScript操作表单实例讲解(上)