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 tips提示效果
Apr 03 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
Vuex入门到上手教程
Jun 20 Javascript
jquery实现聊天机器人
Feb 08 jQuery
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 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 自动加载的简单实现(推荐)
2016/08/12 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
Python数据类型详解(二)列表
2016/05/08 Python
django中静态文件配置static的方法
2018/05/20 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python 解析简单的XML数据
2020/07/24 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
高中数学教学反思
2014/01/30 职场文书
《理想》教学反思
2014/02/17 职场文书
《乞巧》教学反思
2014/02/27 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
农村党员干部承诺书
2015/05/04 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
浅谈Redis中的RDB快照
2021/06/29 Redis
python读取mnist数据集方法案例详解
2021/09/04 Python