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


Posted in Javascript onJune 20, 2016

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

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

以上就是本文的全部内容,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
JavaScript 函数调用规则
Sep 14 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
Node.js插件安装图文教程
May 06 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 #Javascript
jquery 获取select数组与name数组长度的实现代码
Jun 20 #Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 #Javascript
使用jQuery给input标签设置默认值
Jun 20 #Javascript
js中获取时间new Date()的全面介绍
Jun 20 #Javascript
AngularJs Javascript MVC 框架
Jun 20 #Javascript
jQuery 限制输入字符串长度
Jun 20 #Javascript
You might like
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
JS实现计算小于非负数n的素数的数量算法示例
2019/02/26 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
旅游管理专业生自荐信范文
2014/01/02 职场文书
校长先进事迹材料
2014/02/01 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
股东协议书范本
2014/04/14 职场文书
创先争优活动心得体会
2014/09/04 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2014年政协工作总结
2014/12/09 职场文书
创业计划书之农家乐
2019/10/09 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
分享几个实用的CSS代码块
2022/06/10 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS