jQuery實現3D圖片輪播詳解

admin發表於2018-12-02
jQuery3D

本章節分享一段程式碼例項，它實現了3D效果的圖片輪播。

下面就詳細介紹一下它的實現過程，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.wrap {
  width: 1200px;
  height: 460px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}
.wrap li {
  transition: all ease 0.6s;
  -webkit-transition: all ease 0.6s;
  -moz-transition: all ease 0.6s;
  -o-transition: all ease 0.6s;
  position: absolute;
  left: 50%;
  list-style: none;
  -webkit-filter: brightness(0.5);
}
.wrap li img {
  width: 100%;
}
.wrap li.current {
  top: 0;
  -webkit-filter: brightness(1.0);
  margin-left: -390px;
  z-index: 5;
}
.wrap li.next,.wrap li.pre {
  width: 640px;
  top: 25px;
  z-index: 3;
}
.wrap li.next-r,.wrap li.pre-l {
  width: 560px;
  top: 48px;
  z-index: 1;
}
.wrap li.next {
  margin-left: -260px;
}
.wrap li.next-r {
  margin-left: -135px;
}
.wrap li.pre {
  margin-left: -435px;
}
.wrap li.pre-l {
  margin-left: -480px;
}
.wrap a {
  width: 35px;
  height: 35px;
  top: 50%;
  margin-top: -16px;
  display: block;
  position: absolute;
  background: url(demo/jQuery/img/graduation_dir.png) no-repeat;
}
.wrap a.pre-btn {
  left: 0;
  background-position: 0 0;
}
.wrap a.next-btn {
  right: 0;
  background-position: 0 -33px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  $('.btn').click(function () {
    var btnIndex = $(this).index(),
        picElement = $('.wrap ul li'),
        picNum = picElement.length,
        lastPic = picElement.eq(picNum - 1).attr('class'),
        firstPic = picElement.eq(0).attr('class'),
        temp;
    if (btnIndex == 0) { //下一張
      for (var index = picNum; index >= 0; index--) {
        temp = picElement.eq(index - 1).attr('class');
        if (index == 0) {
          picElement.eq(index).attr('class', lastPic);
        } else {
          picElement.eq(index).attr('class', temp);
        }
      }
    } else { //上一張
      for (var j = 0; j < picNum; j++) {
        temp = picElement.eq(j + 1).attr('class');
        if (j == picNum - 1) {
          picElement.eq(j).attr('class', firstPic);
        }
        else {
          picElement.eq(j).attr('class', temp);
        }
      }
    }
  })
})
 </script>
</head>
<body>
  <div class="wrap">
    <a href="javascript:;" class="btn next-btn"></a>
    <a href="javascript:;" class="btn pre-btn"></a>
    <ul style="position:relative">
      <li class="current"><img src="demo/jQuery/img/img1.jpg"/></li>
      <li class="next"><img src="demo/jQuery/img/img2.jpg"/></li>
      <li class="next-r"><img src="demo/jQuery/img/img3.jpg"/></li>
      <li class="pre-l"><img src="demo/jQuery/img/img5.jpg"/></li>
      <li class="pre"><img src="demo/jQuery/img/img4.jpg"/></li>
    </ul>
  </div>
</body>
</html>

上面的程式碼實現了3D輪播效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.wrap li {
  transition: all ease 0.6s;
  -webkit-transition: all ease 0.6s;
  -moz-transition: all ease 0.6s;
  -o-transition: all ease 0.6s;
  position: absolute;
  left: 50%;
  list-style: none;
  -webkit-filter: brightness(0.5);
}

設定動畫的過渡效果。

li元素都是絕對定位，並且left屬性值為50%，然後再挨個設定5個li上下前後左右的順序。

[HTML] 純文字檢視 複製程式碼
<ul style="position:relative">
  <li class="current"><img src="img/img1.jpg"/></li>
  <li class="next"><img src="img/img2.jpg"/></li>
  <li class="next-r"><img src="img/img3.jpg"/></li>
  <li class="pre-l"><img src="img/img5.jpg"/></li>
  <li class="pre"><img src="img/img4.jpg"/></li>
</ul>

上面設定圖片的順序也很講究的。

可以認為ul中li元素是環形的，假設current是當前元素，那麼以此向下類推到pre形成一個環形閉合。

[CSS] 純文字檢視 複製程式碼
.wrap a {
  width: 35px;
  height: 35px;
  top: 50%;
  margin-top: -16px;
  display: block;
  position: absolute;
  background: url(img/graduation_dir.png) no-repeat;
}
.wrap a.pre-btn {
  left: 0;
  background-position: 0 0;
}
.wrap a.next-btn {
  right: 0;
  background-position: 0 -33px;
}

這是設定左右兩個箭頭，原理可以參閱CSS background-position定位詳解一章節。

$(function () {}）,當文件結構完全載入完畢再去執行函式中的程式碼。

$('.btn').click(function () {}）,為按鈕註冊click事件處理函式。

var btnIndex = $(this).index(),獲取按鈕的索引值。

picElement = $('.wrap ul li'),獲取li元素列表集合物件。

picNum = picElement.length，獲取li元素的數目。

lastPic = picElement.eq(picNum - 1).attr('class')，獲取最後一個li元素class屬性值。

firstPic = picElement.eq(0).attr('class')，獲取第一個li元素的class屬性值。

temp，這是一個儲存臨時值的變數，後面會用到。

if (btnIndex == 0) {}，如果是點選的右側按鈕。

for (var index= picNum; index >= 0; index--) {

  temp = picElement.eq(index- 1).attr('class');

  if (index== 0) {

    picElement.eq(i).attr('class', lastPic);

  } else {

    picElement.eq(i).attr('class', temp);

  }

}

當點選下一張的時候，就會將依次將小索引元素的class屬性值替換到大索引元素的class屬性值。

因為元素的位置是通過class控制的，這樣實現了旋轉一下的效果。

上面if判斷語句的作用是，因為如果當前索引為0的元素它沒有索引為-1的前一個元素。

二.相關閱讀:

（1）.index()方法可以參閱jQuery index()方法一章節。

（2）.eq()方法可以參閱jQuery eq()方法一章節。

（3）.attr()方法可以參閱jQuery attr()方法一章節。

相關文章