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 相关文章推荐
正则表达式语法
Oct 09 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
js正则匹配多个全部数据问题
Dec 20 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
杏林同学录(一)
2006/10/09 PHP
PHP的引用详解
2015/02/22 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
用Python写一个无界面的2048小游戏
2016/05/24 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python实现简单日期工具类
2019/04/24 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
python实现打砖块游戏
2020/02/25 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
python打包多类型文件的操作方法
2020/09/21 Python
如何用python批量调整视频声音
2020/12/22 Python
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
教师教学评估方案
2014/05/09 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
python三子棋游戏
2022/05/04 Python