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

更新时间：2016年06月20日 11:08:45 作者：沫鱼

这篇文章主要介绍使用jQuery实现图片左右滚动的实例，需要的朋友可以参考下。

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

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

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

您可能感兴趣的文章:

jQuery中Ajax的get、post等方法详解
前面我们讲述了jQuery中ajax的load（）方法，小伙伴们反应非常好，今天我们就来讲解下jQuery中Ajax的get、post等方法，希望大家同样能够喜欢。
2015-01-01
jQuery随手笔记之常用的jQuery操作DOM事件
Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件，本文给大家介绍jQuery随手笔记之常用的jQuery操作DOM事件，需要的朋友参考下
2015-11-11
JQuery动态创建DOM、表单元素的实现代码
代码很简单，直接上代码。别忘记引用JQuery包。
2011-08-08
jQuery的框架介绍
jQuery使用有一段时间了，但是有一些API的实现实在想不通。小编参考相关资料源码，现在把我的学习过程和收获分享给大家
2016-05-05
jQuery animate easing使用方法图文详解
这篇文章主要介绍了jQuery animate easing使用方法详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
jquery select2的使用心得(推荐)
下面小编就为大家带来一篇jquery select2的使用心得(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
jquery $.ajax各个事件执行顺序
jquery中各个事件执行顺序如下,使用jquery $.ajax的朋友可以参考下。
2010-10-10
实例讲解JQuery中this和$(this)区别
这篇文章主要介绍了实例讲解JQuery中this和$(this)的区别,this表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法,$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值,需要的朋友可以参考下
2014-12-12
JQuery实现DIV其他动画效果的简单实例
下面小编就为大家带来一篇JQuery实现DIV其他动画效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
js和jQuery设置Opacity半透明兼容IE6
对于每一个网站前端开发人员，常常都会遇到设置div透明度的需求，比如在实现图片幻灯片切换效果经常就需要使图片淡入淡出。本文分别对原生js和jQuery在IE和其它浏览器中设置透明度的方法和相关注意事项进行总结。
2016-05-05