jquery는 인덱스 버튼을 사용하여 자동 캐러셀 전환 기능을 구현합니다.

이번에는 인덱스 버튼으로 자동 캐러셀 전환 기능을 구현하기 위한 jquery를 가져왔습니다. jquery가 인덱스 버튼으로 자동 캐러셀 전환 기능을 구현할 때의 주의사항은 무엇인지 살펴보겠습니다.

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
헤드 영역에 CSS 스타일 소개:

<link>
<link>

제가 공유한 jquery에는 다음과 같은 인덱스 버튼과 자동 캐러셀 전환 특수 효과 코드가 있습니다.

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는 인덱스 버튼을 사용하여 자동 캐러셀 전환 기능을 구현합니다." >
            </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는 인덱스 버튼을 사용하여 자동 캐러셀 전환 기능을 구현합니다." >
            </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는 인덱스 버튼을 사용하여 자동 캐러셀 전환 기능을 구현합니다." >
            </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는 인덱스 버튼을 사용하여 자동 캐러셀 전환 기능을 구현합니다." >
            </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>

이 기사의 사례를 읽으신 후 해당 방법을 마스터하셨으리라 믿습니다. 더 흥미로운 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!

추천 자료:

jQuery는 그림 회전판 슬라이드쇼 효과를 구현합니다

jQuery 애니메이션 효과 그림 회전판 구현(코드 포함)

위 내용은 jquery는 인덱스 버튼을 사용하여 자동 캐러셀 전환 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!