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 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
vue.js的提示组件
Mar 02 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
vue使用require.context实现动态注册路由
Dec 25 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 获取页面中指定内容的实现类
2014/01/23 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Exjs 入门篇
2010/04/07 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python如何在bool函数中取值
2020/09/21 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
班主任与学生安全责任书
2014/07/25 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
单位证明范文
2015/06/18 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
技术转让协议书
2016/03/19 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript