jquery带有索引按钮且自动轮播切换特效代码分享


Posted in Javascript onSeptember 15, 2015

本文实例讲述了jquery带有索引按钮且自动轮播切换特效。分享给大家供大家参考。具体如下:
这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码,实现过程很简单。
运行效果图:                              -------------------查看效果 下载源码-------------------

jquery带有索引按钮且自动轮播切换特效代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
在head区域引入CSS样式:

<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">

为大家分享的jquery带有索引按钮且自动轮播切换特效代码如下

<!doctype html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Language" content="zh-cn">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>腾讯微云首页jquery焦点图</title>
  <link rel="stylesheet" href="css/reset.css" media="screen">
  <link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">
  <!--[if IE 6]><script type="text/javascript">try{document.execCommand('BackgroundImageCache',false,true);}catch(e){}</script><![endif]-->
</head>
 <body>
  <div class="wrapper">
    <div class="wy-content">
      <div class="wy-mod-banner">
        <div id="_banners" class="banners">
          <div class="banner banner4">
            <img src="images/banner4.jpg" alt="微云,生活精彩">
            <div class="info">
              <h3>微云,生活精彩</h3>
              <p>收录生活中的点点滴滴,精彩从此刻开始!</p>
              <a href="https://3water.com/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
            </div>
          </div>
          <div class="banner banner3">
            <img src="images/banner3.jpg" alt="微云,生活精彩">
            <div class="info">
              <h3>微云,生活精彩</h3>
              <p>收录生活中的点点滴滴,精彩从此刻开始!</p>
              <a href="https://3water.com/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
            </div>
          </div>
          <div class="banner banner2">
            <img src="images/banner2.jpg" alt="微云,生活精彩">
            <div class="info">
              <h3>微云,生活精彩</h3>
              <p>收录生活中的点点滴滴,精彩从此刻开始!</p>
              <a href="https://3water.com/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
            </div>
          </div>
          <div class="banner banner1">
            <img src="images/banner1.jpg" alt="微云,生活精彩">
            <div class="info">
              <h3>微云,生活精彩</h3>
              <p>收录生活中的点点滴滴,精彩从此刻开始!</p>
              <a href="https://3water.com/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载</span> <i class="bor_c"></i></a>
            </div>
          </div>
        </div>
        <div id="_focus" class="focus">
          <a data-index="0" href="#" class="on">
            <span class="bg-b"></span>
            <span class="inner"></span>
          </a>
          <a data-index="1" href="#">
            <span class="bg-b"></span>
            <span class="inner"></span>
          </a>
          <a data-index="2" href="#">
            <span class="bg-b"></span>
            <span class="inner"></span>
          </a>
          <a data-index="3" href="#">
            <span class="bg-b"></span>
            <span class="inner"></span>
          </a>   
        </div>
      </div>

    </div>

  </div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

  var glume = function(banners_id, focus_id){
    this.$ctn = $('#' + banners_id);
    this.$focus = $('#' + focus_id);
    this.$adLis = null;
    this.$btns = null;
    this.switchSpeed = 5;//自动播放间隔(s)
    this.defOpacity = 1;
    this.crtIndex = 0;
    this.adLength = 0;
    this.timerSwitch = null;
    this.init();
  };
  glume.prototype = {
    fnNextIndex:function(){
      return (this.crtIndex >= this.adLength-1)?0:this.crtIndex+1;
    },
    //动画切换
    fnSwitch:function(toIndex){
      if(this.crtIndex==toIndex){return;}
      this.$adLis.css('zIndex', 0);
      this.$adLis.filter(':eq('+this.crtIndex+')').css('zIndex', 2);
      this.$adLis.filter(':eq('+toIndex+')').css('zIndex', 1);
      this.$btns.removeClass('on');
      this.$btns.filter(':eq('+toIndex+')').addClass('on');
      var me = this;

      $(this.$adLis[this.crtIndex]).animate({
        opacity: 0
      }, 1000, function() {
        me.crtIndex = toIndex;
        $(this).css({
          opacity: me.defOpacity,
          zIndex: 0
        });
      });
    },
    fnAutoPlay:function(){
      this.fnSwitch(this.fnNextIndex());
    },
    fnPlay:function(){
      var me = this;
      me.timerSwitch = window.setInterval(function() {
        me.fnAutoPlay();
      },me.switchSpeed*1000);
    },
    fnStopPlay:function(){
      window.clearTimeout(this.timerSwitch);
      this.timerSwitch = null;
    },

    init:function(){
      this.$adLis = this.$ctn.children();
      this.$btns = this.$focus.children();
      this.adLength = this.$adLis.length;

      var me = this;
      //点击切换
      this.$focus.on('click', 'a', function(e) {
        e.preventDefault();
        var index = parseInt($(this).attr('data-index'), 10)
        me.fnSwitch(index);
      });
      this.$adLis.filter(':eq('+ this.crtIndex +')').css('zIndex', 2);
      this.fnPlay();

      //hover时暂停动画
      this.$ctn.hover(function() {
        me.fnStopPlay();
      }, function() {
        me.fnPlay();
      });

      if($.browser.msie && $.browser.version < 7) {
        this.$btns.hover(function() {
          $(this).addClass('hover');
        },function() {
          $(this).removeClass('hover');
        });
      }
    }
  };
  var player1 = new glume('_banners', '_focus');  
  </script>
</body>
</html>

以上就是为大家分享的基于jquery实现的带有索引按钮且自动轮播切换特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
详解jQuery选择器
Dec 21 Javascript
js编写选项卡效果
May 23 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
jquery图片轮播特效代码分享
Apr 20 #Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 #Javascript
jQuery焦点图切换特效代码分享
Sep 15 #Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 #Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 #Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 #Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
手机端转换rem适应
2017/04/01 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
python 字符串格式化代码
2013/03/17 Python
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python获取央视节目单的实现代码
2015/07/25 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
自荐信怎么写好
2013/11/11 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
Django 实现jwt认证的示例
2021/04/30 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Python实现视频自动打码的示例代码
2022/04/08 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers
python中使用redis用法详解
2022/12/24 Redis