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 相关文章推荐
网上抓的一个特效
May 11 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
vue实现两个组件之间数据共享和修改操作
Nov 12 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 删除无限级目录与文件代码共享
2008/11/22 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
php密码生成类实例
2014/09/24 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
独特的python循环语句
2016/11/20 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python装饰器语法糖
2019/01/02 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python/golang 删除链表中的元素
2020/09/14 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
电子商务专业实习生自我鉴定
2013/09/24 职场文书
高一物理教学反思
2014/01/24 职场文书
校园安全检查制度
2014/02/03 职场文书
大课间体育活动方案
2014/03/12 职场文书
数控机床专业自荐信
2014/05/19 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android