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 相关文章推荐
window resize和scroll事件的基本优化思路
Apr 29 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
javascript执行环境及作用域详解
May 05 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
jQuery事件对象总结
Oct 17 Javascript
使用node.js搭建服务器
May 20 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
微信小程序实现工作时间段选择
Feb 15 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调用Webservice实例代码
2011/07/29 PHP
2014过年倒计时示例
2014/01/31 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
js实现自定义路由
2017/02/04 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
微信小程序点击item使之滚动到屏幕中间位置
2020/03/25 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
Python threading多线程编程实例
2014/09/18 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python的依赖管理的实现
2019/05/14 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
python如何实现递归转非递归
2021/02/25 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
个人道歉信大全
2019/04/11 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript