Home >Web Front-end >JS Tutorial >jquery implements automatic carousel switching function with index button

jquery implements automatic carousel switching function with index button

php中世界最好的语言Original: 2018-04-24 11:25:201323browse

This time I will bring you jquery to implement the automatic carousel switching function with index buttons. What are the things to note in jquery to implement the automatic carousel switching function with index buttons. The following is a practical case. Let’s take a look. one time.

Tips: If the browser does not work properly, you can try switching the browsing mode.

Introduce CSS styles in the head area:

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

The jquery shared with you has an index button and the automatic carousel switching special effect code is as follows

<!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>

I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

jquery implements automatic carousel switching function with index button

Related articles