jQuery pelaksanaan karusel imej skrin lebar tutorial

jQuery pelaksanaan karusel imej skrin lebar tutorial_jquery

WBOY

Lepaskan： 2016-05-16 15:30:09

asal

1107 orang telah melayarinya

Artikel ini menerangkan contoh tutorial melaksanakan karusel imej skrin lebar dengan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Perkenalkan perpustakaan jquery

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

Salin selepas log masuk

Bina html
Keseluruhan kod dibahagikan kepada tiga bahagian:

1. Memuatkan bahagian

2. Di bahagian gambar, hanya boleh ada 4 gambar di sini Kawan-kawan yang berminat boleh memperbaikinya;

3. Bahagian butang TAB Sudah tentu, hanya terdapat 4 butang di sini, dan ia juga perlu diperbaiki.

<div class="gg" id="gg">
      <div class="ggLoading">
        <div class="ggLoading2"><em>精彩活动载入中</em></div>
      </div>
      <div class="ggs">
        <div class="ggBox" id="ggBox">
          <a href="#" title="5月22日测试开启领报名资格" style="z-index: 3; opacity: 4;">
            <img src="images/1.jpg" alt="" /></a>
          <a href="#" title="首测世界的雕琢篇章开启">
            <img src="images/2.jpg" alt="" /></a>
          <a href="#" title="上古世纪游戏资料手册">
            <img src="images/3.jpg" alt="" /></a>
          <a href="#" title="游戏四大特色揭晓">
            <img src="images/4.jpg" alt="" /></a>
        </div>
      </div>
      <div class="ggb">
        <div class="ggBtns" id="ggBtns">
          <a title="5月22日测试开启领报名资格" href='javascript:void(0)' class="ggOn"><em>5月22日测试开启领报名资格</em></a>
          <a title="首测世界的雕琢篇章开启" href='javascript:void(0)'><em>首测世界的雕琢篇章开启</em></a>
          <a title="上古世纪游戏资料手册" href='javascript:void(0)'><em>上古世纪游戏资料手册</em></a>
          <a title="游戏四大特色揭晓" href='javascript:void(0)'><em>游戏四大特色揭晓</em></a>
        </div>
      </div>
    </div>

Salin selepas log masuk

Gaya CSS CSS di sini boleh disesuaikan mengikut keperluan projek Anda tidak perlu mematuhi kod di bawah, selagi anda memahami prinsipnya. Jika anda tidak memahami CSS di bawah, sila tebusnya saya tidak akan menerangkannya satu per satu di sini.

.ggLoading, .ggLoading2 {
  background-image: url(../images/nav.png);
}
.gg {
  width: 100%;
  height: 500px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0 auto;
  background: #d3d3d3 url(../images/loading.jpg) repeat-x;
}
.ggLoading {
  position: absolute;
  left: 40%;
  top: 200px;
  width: 325px;
  text-align: center;
  height: 56px;
  background-position: 0 -274px;
  background-repeat: no-repeat;
  line-height: 56px;
  color: #9c9c9c;
}
.ggLoading2 {
  width: 330px;
  height: 56px;
  background-position: 213px -330px;
  background-repeat: no-repeat;
}
.ggLoading em {
  font-weight: bold;
}
.ggs {
  width: 200%;
  height: 500px;
  left: -50%;
  top: 0;
  position: absolute;
}
.ggBox {
  width: 1920px;
  height: 500px;
  margin: 0 auto;
}
.ggBox a {
  display: block;
  width: 1920px;
  height: 500px;
  position: absolute;
  z-index: 1;
  opacity: 0.1;
}
.ggBox img {
  display: block;
  width: 1920px;
  height: 500px;
}
.ggb {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 40px;
  z-index: 4;
  background-color: #32342e;
  background-repeat: repeat-x;
  background-position: 50% -40px;
}
.ggBtns {
  width: 960px;
  height: 40px;
  margin: 0 auto;
  border-left: 1px solid #090908;
  border-right: 1px solid #6a6a60;
}
.ggBtns a {
  float: left;
  display: block;
  width: 240px;
  height: 40px;
  text-align: center;
  padding-top: 10px;
  color: #848380;
  font-size: 14px;
  line-height: 40px;
  background-position: 0 10px;
  position: relative;
  top: -10px;
  outline: none;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ggBtns a em {
  display: block;
  width: 210px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
}
.ggBtns a:hover {
  color: #e7e7e7;
}
.ggBtns a:focus {
  outline: none;
}
.ggBtns a.ggOn {
  color: #e7e7e7;
  background-position: 0 0;
}
.ggb, .ggBtns a {
  background-image: url(../images/main.jpg);
}
a.ggOn {
  background-image: url(../images/gg.png);
}

Salin selepas log masuk

Kod JS Akhirnya, kita telah sampai ke bahagian penting. Tidak banyak kod dalam bahagian ini, jadi mari kita lihat.

$(function () {//文档加载后执行
   
  //定义$con,$box,$btns,$i变量，autoChange自动播放函数，loop定时器。 
  var $con = $('#gg'), $box = $con.find('#ggBox'), $btns = $con.find('#ggBtns'), i = 0, autoChange = function () {
    i += 1;//计数器+1
    if (i === 4) { i = 0; }//如果计数器i等4就把i重置为0.
     
    $btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn');
    //找到TAB按钮中的第i个a标签，为其加上ggOn的样式，同时移除所有同级的a标签ggOn样式
    var curr = $box.find('a:eq(' + i + ')'), prev = curr.siblings();
    //定义curr变量，并赋值为$box中当前显示图片的a标签，定义prev变量，赋值为$box中除了当前显示图片的A标签外的所有A标签。
    prev.css('z-index', 2);//$box中除了当前显示图片的A标签外的所有A标签的index值变为2，即向下移一层
    curr.css('z-index', 3).animate({ //$box中当前显示图片的a标签index值变为3，即向上移一层，然后使用jquery动画以150毫秒把透明度变为1，之后执行匿名函数function。
      'opacity': 1
    }, 150, function () { //$box中除了当前显示图片的A标签外的所有A标签的index值变为1，并把透明度变为0.1
      prev.css({
        'z-index': 1, 'opacity': 0.1
      });
    });
  }, loop = setInterval(autoChange, 5000);//定义定时器，每5秒执行一次autoChange函数，达到自动播放效果。
  $con.hover(function () { //定义鼠标悬浮与离开事件
    clearInterval(loop); //鼠标悬浮时移除Loog定时器，即停止播放
  }, function () {
    loop = setInterval(autoChange, 5000); //鼠标离开时载放Loog定时器，继续播放
  });
  $btns.find('a').click(function () {//定义tab按钮事件
    i = $(this).index() - 1; //tab按钮中当前A标签的index值-1，并赋值给i计数器
    autoChange();  //调用切换方法切换图片
  });
});

Salin selepas log masuk

Saya tertanya-tanya adakah anda faham prinsip selepas membaca nota di atas? Malah, keseluruhan kod dibahagikan kepada empat bahagian:

1. Penukaran imej
Gunakan i sebagai kaunter, paparkan gambar pada masa ini untuk i, sembunyikan semua gambar lain, tambah gaya ggOn pada butang pada masa ini untuk i, keluarkan gaya ggOn untuk butang lain, dan saya akan menambah setiap kali fungsi pensuisan dipanggil 1.
2. Main automatik Tentukan gelung pemasa untuk memanggil fungsi pensuisan setiap 5 saat.

3. Acara tuding tetikus Ternyata pemasa gelung dikosongkan apabila tetikus melayang, dan pemasa gelung dimuatkan apabila tetikus pergi.

4. Acara butang Ikat peristiwa klik butang tab Selepas mengklik, tetapkan i nilai indeks butang tab semasa -1, dan panggil fungsi pensuisan.

Di atas adalah semua kod utama untuk jquery untuk melaksanakan karusel imej. Saya harap anda akan mengkajinya dengan teliti.