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 相关文章推荐
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
php 高效率写法 推荐
2010/02/21 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python中字符串与编码示例代码
2019/05/20 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
应用数学自荐书范文
2013/11/24 职场文书
结婚邀请函范文
2014/01/14 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
签约仪式致辞
2015/07/30 职场文书
养成教育工作总结
2015/08/13 职场文书
教师节主题班会方案
2015/08/17 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫