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 相关文章推荐
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
Three.js快速入门教程
Sep 09 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
validform表单验证的实现方法
Mar 08 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
JS实现瀑布流效果
Mar 07 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP常用编译参数中文说明
2014/09/27 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python如何实现图片压缩
2020/09/11 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
教育学专业实习生的自我鉴定
2013/11/26 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
新郎答谢词
2015/01/04 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python