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 相关文章推荐
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
vue发送ajax请求详解
Oct 09 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
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简单生成随机数的方法
2015/07/30 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
js实现简单页面全屏
2019/09/17 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python地震数据可视化详解
2019/06/18 Python
python 中xpath爬虫实例详解
2019/08/26 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
python中remove函数的踩坑记录
2021/01/04 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
思想汇报范文
2013/11/04 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
成品仓管员工作职责
2013/12/29 职场文书
赔偿协议书范本
2014/04/15 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers