js实现图片轮播效果


Posted in Javascript onDecember 19, 2015

本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下

运行代码如下

js实现图片轮播效果

具体代码如下

插件是基于jQuery写的,主要实现的功能:自动播放、鼠标悬停、左右箭头控制+禁止点击

CSS样式:

<style>
  .cooperation-box {
    position: relative;
    height: 91px;
    border-bottom: 1px solid #E0DED9;
    overflow: hidden;
  }
  .cooperation {
    position: relative;
    left: 0;
    height: 50px;
    padding: 20px 0;
  }
  .cooperation li {
    float: left;
    width: 205px;
    text-align: center;
  }
  .cooperation li a {
    display: block;
  }
  .cooperation li img {
    height: 100%;
  }
  .cooperation-box>a {
    display: block;
    position: absolute;
    top: 0;
    z-index: 9;
    width: 22px;
    height: 100%;
    background: #f5f5f5;
    font-family: '宋体';
    font-size: 18px;
    color: #aaa;
    font-weight: bold;
    text-align: center;
    line-height: 91px;
  }
  .cooperation-box>a:hover {
    background: #e5e5e5;
  }
  .cooperation-box .prev {
    left: 0;
    border-right: 1px solid #E0DED9;
  }
  .cooperation-box .next {
    right: 0;
    border-left: 1px solid #E0DED9;
  }
  .cooperation-box .prev.disabled,
  .cooperation-box .next.disabled {
    background: #fbfbfb;
    color: #ddd;
  }
  .cooperation-box .prev.disabled:hover,
  .cooperation-box .next.disabled:hover {
    background: #fbfbfb;
  }
</style>

HTML布局( a标签最好加个title属性 ):

<div class="cooperation-box">
  <a class="prev" href="javascript:;"><</a>
  <a class="next" href="javascript:;">></a>
  <ul class="cooperation">
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
    <li><a href="javascript:;" target="_blank"><img src="images/img-demo3.jpg" alt=""></a></li>
  </ul>
</div>

JS脚本插件:

<script>
  $.extend({
    /*
     图片轮播效果
     效果:
     1、自动滚动
     2、鼠标悬停
     3、左右控制+禁止点击
     调用:$.scroll({box: '父容器', scrollbox: 'ul', time: 1500});
     */
    scroll: function(options) {
      // 默认配置
      var defaults = {
        box: '.cooperation-box', // 父容器
         scrollbox: '.cooperation', // ul容器
        time: 1500 // 切换时间
      };

      // 扩展配置
      var conf = $.extend({}, defaults, options);

      // 获取li的个数
      var liSize = $(conf.box).find('li').size();

      // 获取li的宽度
      var liWidth = $(conf.box).find('li:first').width();

      // 定义ul的宽度 
      $(conf.scrollbox).width(liWidth*liSize);

      // 右箭头初始化(不可点)
      $(conf.box).find('.next').addClass('disabled');

      // 定义一个全局变量index索引变量
      var index = 0;

      // 切换函数
      function switchFunc() {
        index++;
        if(index > liSize-5) { // 必须有5个显示在上面
          index=liSize-5;

          // 把滚动过的添加到后面,初始left值为0 index值为0
          var scrolledLi = $(conf.box).find('li:lt('+index+')');
          $(conf.scrollbox).append(scrolledLi);
          $(conf.scrollbox).css('left', 0);
          index = 0;
        }
        $(conf.scrollbox).stop(true, true).animate(
            {'left': -liWidth*index},
            500,
            function() {
              $(conf.box).find('.next').removeClass('disabled');
            }
        );
      }

      // 自动播放
      var autoPlay = setInterval(function() {switchFunc();}, conf.time);

      // 鼠标浮上暂停
      $(conf.box).mouseover(function() {
        clearInterval(autoPlay);
      });

      // 鼠标离开继续
      $(conf.box).mouseout(function() {
        autoPlay = setInterval(function() {switchFunc();}, conf.time);
      });

      // 点击左箭头
      $(conf.box).find('.prev').click(function() {
        index++;
        if(index >= liSize-5) {
          index=liSize-5;
          $(this).addClass('disabled');
        }
        $(conf.scrollbox).stop(true, true).animate(
            {'left': -liWidth*index},
            500,
            function() {
              $(conf.box).find('.next').removeClass('disabled');
            }
        );
      });

      // 点击右箭头
      $(conf.box).find('.next').click(function() {
        index--;
        if(index <= 0) {
          index = 0;
          $(this).addClass('disabled');
        }
        $(conf.scrollbox).stop(true, true).animate(
            {'left': -liWidth*index},
            500,
            function() {
              $(conf.box).find('.prev').removeClass('disabled');
            }
        );
      });
    }
  });
</script>

页面调用:

<script>
  $(function() {
    $.scroll({time: 1500});
  });
</script>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
vue实现动态按钮功能
May 13 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
js实现图片上传并正常显示
Dec 19 #Javascript
thinkphp实现无限分类(使用递归)
Dec 19 #Javascript
15个常用的jquery代码片段
Dec 19 #Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 #Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 #Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 #Javascript
jQuery中trigger()与bind()用法分析
Dec 18 #Javascript
You might like
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
短信提示使用 特效
2007/01/19 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
python中input()与raw_input()的区别分析
2016/02/27 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
实习自荐信
2013/10/13 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫