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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
javascript实现的DES加密示例
Oct 30 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
深入理解Angular4订阅(Subscribe)与取消
Nov 22 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
php中explode与split的区别介绍
2012/10/03 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python从零开始创建区块链
2018/03/06 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Django实现学生管理系统
2019/02/26 Python
python求绝对值的三种方法小结
2019/12/04 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
企业管理培训感言
2014/01/27 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
开平碉楼导游词
2015/02/06 职场文书
初婚初育证明范本
2015/06/18 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers
Redis基本数据类型String常用操作命令
2022/06/01 Redis