jquery实现有索引按钮自动轮播切换功能-js教程-PHP中文网

首页

web前端

js教程

jquery实现有索引按钮自动轮播切换功能

php中世界最好的语言

Apr 24, 2018 am 11:25 AM

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>
  <p class="wrapper">
    <p class="wy-content">
      <p class="wy-mod-banner">
        <p id="_banners" class="banners">
          <p class="banner banner4">
            <img src="images/banner4.jpg" alt="微云，生活精彩">
            <p class="info">
              <h3>微云，生活精彩</h3>
              <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
              <a href="http://www.jb51.net/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
            </p>
          </p>
          <p class="banner banner3">
            <img src="images/banner3.jpg" alt="微云，生活精彩">
            <p class="info">
              <h3>微云，生活精彩</h3>
              <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
              <a href="http://www.jb51.net/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
            </p>
          </p>
          <p class="banner banner2">
            <img src="images/banner2.jpg" alt="微云，生活精彩">
            <p class="info">
              <h3>微云，生活精彩</h3>
              <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
              <a href="http://www.jb51.net/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a>
            </p>
          </p>
          <p class="banner banner1">
            <img src="images/banner1.jpg" alt="微云，生活精彩">
            <p class="info">
              <h3>微云，生活精彩</h3>
              <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
              <a href="http://www.jb51.net/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载</span> <i class="bor_c"></i></a>
            </p>
          </p>
        </p>
        <p 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>   
        </p>
      </p>
    </p>
  </p>
<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>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现图片轮播幻灯片效果

jQuery动画效果图片轮播实现（附代码）

以上是jquery实现有索引按钮自动轮播切换功能的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。