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入门学习书籍推荐
Jun 12 Javascript
jquery.alert 弹出式复选框实现代码
Jun 15 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
vue模块移动组件的实现示例
May 20 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
图片之间的切换
2006/06/26 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python sqlite的Row对象操作示例
2019/09/11 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
高中生职业生涯规划书
2014/02/24 职场文书
财务部总监岗位职责
2014/03/12 职场文书
同居协议书范本
2014/04/23 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
会计求职简历自我评价
2015/03/10 职场文书