Heim > Artikel > Web-Frontend > jquery implementiert die Funktion zum automatischen Karussellwechsel mit der Indexschaltfläche

jquery implementiert die Funktion zum automatischen Karussellwechsel mit der Indexschaltfläche

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

Dieses Mal bringe ich Ihnen jquery zum Implementieren der automatischen Karussellschaltfunktion mit Indexschaltflächen. Was sind die Vorsichtsmaßnahmen für jquery, um die automatische Karussellschaltfunktion mit Indexschaltflächen zu implementieren? . Lasst uns einmal einen Blick darauf werfen.

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Führen Sie CSS-Stile im Kopfbereich ein:

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

Die JQuery, die ich mit Ihnen geteilt habe, verfügt über eine Indexschaltfläche und der Spezialeffektcode für die automatische Karussellumschaltung lautet wie folgt

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

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jQuery implementiert Bildkarussell-Diashow-Effekt

jQuery-Animationseffekt-Bildkarussell-Implementierung (im Anhang) Code)

Das obige ist der detaillierte Inhalt vonjquery implementiert die Funktion zum automatischen Karussellwechsel mit der Indexschaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery css

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery + PHP realisiert einen dynamischen digitalen AnzeigeeffektNächster Artikel：jquery + PHP realisiert einen dynamischen digitalen Anzeigeeffekt

In Verbindung stehende Artikel

Mehr sehen