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获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
js中top的作用深入剖析
Mar 04 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
Puppet的一些技巧
Sep 17 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
JS实现百度搜索框
Feb 25 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
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php备份数据库类分享
2015/04/14 PHP
jQuery 操作XML入门
2008/12/25 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
Python requests获取网页常用方法解析
2020/02/20 Python
python TCP包注入方式
2020/05/05 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
工作的心得体会
2013/12/31 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
中英文求职信范文
2015/03/19 职场文书
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
Python使用DFA算法过滤内容敏感词
2022/04/22 Python