jquery implements automatic carousel switching function with index button

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

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

nbsp;html>


  <meta>
  <meta>
  <meta>
  <title>腾讯微云首页jquery焦点图</title>
  <link>
  <link>
  <!--[if IE 6]><script type="text/javascript">try{document.execCommand(&#39;BackgroundImageCache&#39;,false,true);}catch(e){}</script><![endif]-->

 
  <p>
    </p><p>
      </p><p>
        </p><p>
          </p><p>
            <img  src="/static/imghwm/default1.png" data-src="images/banner4.jpg" class="lazy" alt="jquery implements automatic carousel switching function with index button" >
            </p><p>
              </p><h3 id="微云-生活精彩">微云，生活精彩</h3>
              <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
              <a><span>马上下载 </span><i></i></a>
            
          
          <p>
            <img  src="/static/imghwm/default1.png" data-src="images/banner3.jpg" class="lazy" alt="jquery implements automatic carousel switching function with index button" >
            </p><p>
              </p><h3 id="微云-生活精彩">微云，生活精彩</h3>
              <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
              <a><span>马上下载 </span><i></i></a>
            
          
          <p>
            <img  src="/static/imghwm/default1.png" data-src="images/banner2.jpg" class="lazy" alt="jquery implements automatic carousel switching function with index button" >
            </p><p>
              </p><h3 id="微云-生活精彩">微云，生活精彩</h3>
              <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
              <a><span>马上下载 </span><i></i></a>
            
          
          <p>
            <img  src="/static/imghwm/default1.png" data-src="images/banner1.jpg" class="lazy" alt="jquery implements automatic carousel switching function with index button" >
            </p><p>
              </p><h3 id="微云-生活精彩">微云，生活精彩</h3>
              <p>收录生活中的点点滴滴，精彩从此刻开始！</p>
              <a><span>马上下载</span> <i></i></a>
            
          
        
        <p>
          <a>
            <span></span>
            <span></span>
          </a>
          <a>
            <span></span>
            <span></span>
          </a>
          <a>
            <span></span>
            <span></span>
          </a>
          <a>
            <span></span>
            <span></span>
          </a>   
        </p>
      
    
  
<script></script>
<script>
  var glume = function(banners_id, focus_id){
    this.$ctn = $(&#39;#&#39; + banners_id);
    this.$focus = $(&#39;#&#39; + 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(&#39;zIndex&#39;, 0);
      this.$adLis.filter(&#39;:eq(&#39;+this.crtIndex+&#39;)&#39;).css(&#39;zIndex&#39;, 2);
      this.$adLis.filter(&#39;:eq(&#39;+toIndex+&#39;)&#39;).css(&#39;zIndex&#39;, 1);
      this.$btns.removeClass(&#39;on&#39;);
      this.$btns.filter(&#39;:eq(&#39;+toIndex+&#39;)&#39;).addClass(&#39;on&#39;);
      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(&#39;click&#39;, &#39;a&#39;, function(e) {
        e.preventDefault();
        var index = parseInt($(this).attr(&#39;data-index&#39;), 10)
        me.fnSwitch(index);
      });
      this.$adLis.filter(&#39;:eq(&#39;+ this.crtIndex +&#39;)&#39;).css(&#39;zIndex&#39;, 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(&#39;hover&#39;);
        },function() {
          $(this).removeClass(&#39;hover&#39;);
        });
      }
    }
  };
  var player1 = new glume(&#39;_banners&#39;, &#39;_focus&#39;);  
  </script>

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!

Recommended reading:

jQuery realizes the picture carousel slide effect

jQuery animation effect picture carousel realization (attached Code)

The above is the detailed content of jquery implements automatic carousel switching function with index button. For more information, please follow other related articles on the PHP Chinese website!