cari

Rumah >hujung hadapan web >tutorial js >jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery

jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery

WBOY
WBOYasal
2016-05-16 15:39:181371semak imbas

Contoh dalam artikel ini menerangkan jquery dengan butang indeks dan kesan penukaran karusel automatik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah kod dengan butang indeks dan penukaran karusel automatik kesan khas dilaksanakan berdasarkan jquery Proses pelaksanaan adalah sangat mudah.
运行效果图：                              -------------------查看效果 下载源码------->------->------->------->- --------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Perkenalkan gaya CSS di kawasan kepala: 

<link rel="stylesheet" href="css/reset.css" media="screen">
<link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">
Jquery dengan butang indeks dan penukaran karusel automatik kod kesan khas yang dikongsi dengan anda adalah seperti berikut


<!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>
  <div class="wrapper">
    <div class="wy-content">
      <div class="wy-mod-banner">
        <div id="_banners" class="banners">
          <div class="banner banner4">
            <img src="images/banner4.jpg" alt="jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery">
            <div class="info">
              <h3>jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery</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>
            </div>
          </div>
          <div class="banner banner3">
            <img src="images/banner3.jpg" alt="jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery">
            <div class="info">
              <h3>jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery</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>
            </div>
          </div>
          <div class="banner banner2">
            <img src="images/banner2.jpg" alt="jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery">
            <div class="info">
              <h3>jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery</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>
            </div>
          </div>
          <div class="banner banner1">
            <img src="images/banner1.jpg" alt="jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery">
            <div class="info">
              <h3>jquery mempunyai butang indeks dan penukaran karusel automatik perkongsian kod kesan khas_jquery</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>
            </div>
          </div>
        </div>
        <div 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>   
        </div>
      </div>

    </div>

  </div>
<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)&#63;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>
Di atas adalah kod kesan khas dengan butang indeks dan pensuisan karusel automatik berdasarkan jquery yang saya kongsikan dengan anda, saya harap anda boleh menyukainya dan menerapkannya dalam amalan.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Penyelesaian kepada masalah bahawa sifat Dayakan kawalan Kotak Semak dalam Asp.net tidak boleh ditukar terus menggunakan kemahiran JavaScript script_javascriptArtikel seterusnya：Penyelesaian kepada masalah bahawa sifat Dayakan kawalan Kotak Semak dalam Asp.net tidak boleh ditukar terus menggunakan kemahiran JavaScript script_javascript

Artikel berkaitan

Lihat lagi