jQuery自適應-3D旋轉輪播圖
阿新 • • 發佈：2018-11-11
3D旋轉輪播圖
本例源於（站長之家例項http://sc.chinaz.com/jiaoben/170215391070.htm）
其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）
自己研究重寫了一遍。
一、先寫靜態的初始樣式的css和html。我用的是 550x300的大小一致的 5張圖片，程式碼可拓展為三張、四張、甚至大於五張。如圖是靜態效果：
圖後的程式碼是靜態時的樣式html和css。
<!DOCTYPE html> <html lang="en"> <head> <View Codemeta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- jquery CDN --> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> * { margin: 0; padding: 0;word-break: break-all; } a { color:#fff;text-decoration: none;} a:hover { text-decoration: none;} ul,li { list-style: none;} html,body{width: 100%;height: 100%;} .main {max-width: 800px; margin: 0 auto;} #slide {width:100%;height: 420px;position: relative;overflow: hidden;} #slide .pic { position: absolute; } #slide .pic img {width: calc(100% - 14px);height: calc(100% - 14px);} #slide .p1 { z-index: 3;width: 40%;height: 40%;left: -50%;top: 30%;} #slide .p2 { z-index: 4;width: 60%;height: 60%;left: -20%;top: 20%;} #slide .p3 {z-index: 5; width: 80%;height: 80%; left: 10%;top: 10%;} #slide .p4 { z-index: 4; width: 60%; height: 60%; left: 60%; top: 20%;} #slide .p5 { z-index: 3; width: 40%;height: 40%; left: 110%; top: 30%;} #slide .btn { position: absolute; z-index: 6; bottom: 20%; width: 180px; /* 計算得出 5*30+5*6=180 */ margin-left: -90px; left: 50%; } #slide .btn span { width: 24px; height: 8px; border-radius: 3px; float: left; background-color: #dedede; margin: 0 3px; } #slide .btn .on {background-color: #ffd200; } </style> </head> <body> <div class="main"> <div id="slide" class="slide"> <div class="pic"><img src="./images/1.png"></div> <div class="pic"><img src="./images/2.png"></div> <div class="pic"><img src="./images/3.png"></div> <div class="pic"><img src="./images/4.png"></div> <div class="pic"><img src="./images/5.png"></div> <div class="btn"> <!-- <span data-minibtn-id='1'></span><span></span><span></span><span></span><span></span> --> </div> </div> <button class="btn-prev">向左</button> <button class="btn-next">向右</button> </div> </body> </html>
二、然後，js編寫動態互動效果。這段是js程式碼（要引入jQuery庫）
備註還比較詳細，一和二的程式碼直接複製就可以執行。
<script>
var slideNumber; //輪播圖片的數量
var miniSlideBtn = true; //miniSlideBtn=true為開啟滾動按鈕
var isableTouch = true; //是否可以觸控滑動切換
var isAutoPlay = true; //是否可以自動輪播
//視窗大小改變時改變輪播圖寬高
$(window).resize(function () {
$(".slide").height($(".slide").width() * 0.56);
});
$(function () {
$("#slide").height($("#slide").width() * 0.56); //調整輪播圖的高度
slideNumber = $("#slide img").length; //輪播圖數量
for (let i = 0; i < slideNumber; i++) { //給每個div,而不是img,新增自定義屬性編號
$("#slide .pic").eq(i).attr('data-img-id', i);
}
// 根據輪播圖片數量新增圖片位置對應的樣式
// 還有 if(slideNumber=1,=2,=3,=4,>5)
if (slideNumber = 5) {
for (let i = 0; i < slideNumber; i++) {
$("#slide .pic").eq(i).addClass('p' + (i + 1));
}
}
//根據圖片數量設定輪播圖按鈕
if (miniSlideBtn) {
for (let i = 0; i < slideNumber; i++) {
$("#slide .btn").append("<span data-minibtn-id=" + i + "></span>");
}
$("#slide .btn").width(slideNumber * 34);
$("#slide .btn").css('margin-left', '-' + slideNumber * 17 + 'px'); //調整margin-left 負值使按鈕居中
}
//自動切換
if (isAutoPlay) { setInterval(() => { right(); }, 3000) }
//觸控切換
if (isableTouch) { slideTouch(); }
imgClickChange();//點選圖片左右切換圖片
currentBtn();//當前輪播按鈕的選中狀態
});
$(".btn-prev").click(function () { //點選按鈕翻上一頁
left();
})
$(".btn-next").click(function () { //點選按鈕翻下一頁
right();
})
/*下一張圖片，右邊的圖向左走，注意:第一個變成最後一個，最後一個變成倒數第二個*/
function right() {
let temp = new Array();
for (let i = 0; i < slideNumber; i++) {
temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //臨時陣列獲取class是pic p1,pic p2,pic p3...
}
for (let i = 0; i < slideNumber; i++) {
if (i == 0) { //如果編號為第一張圖片，它將變成最後一個
$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[slideNumber - 1]);
} else {
$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i - 1]);
}
}
imgClickChange();//點選圖片左右切換圖片
currentBtn();//當前輪播按鈕的選中狀態
}
/*上一張圖片, 左邊的圖向右走，注意:最後一張會變成第一張，第一個圖變成第二個*/
function left() {
let temp = new Array();
for (let i = 0; i < slideNumber; i++) {
temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //臨時陣列獲取class pic p1,pic p2...
}
for (let i = 0; i < slideNumber; i++) {
if (i == slideNumber - 1) { //如果編號為最後一張圖片，它將變成
$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[0]);
} else {
$("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i + 1]);
}
}
imgClickChange();//點選圖片本身切換圖片
currentBtn();//當前輪播按鈕的選中狀態
}
/*點選圖片左右切換圖片*/
function imgClickChange() {
// $("#slide .p2").click(function(){ prevImg();});//為什麼這種寫法無效
// $("#slide .p4").click(function(){ nextImg();});//為什麼這種寫法無效
$('#slide .pic').removeAttr('onclick');
$("#slide .p2").attr('onclick', 'left()');
$("#slide .p4").attr('onclick', 'right()');
}
/*當前輪播按鈕的選中狀態*/
function currentBtn() {
var cur = parseInt($("#slide .p3").attr('data-img-id'));//取.p3的當前img-id
$("#slide .btn span").removeClass('on');
$("#slide .btn span[data-minibtn-id=" + cur + "]").addClass('on');
}
/* jquery寫法 slideTouch(),觸控滑動切換 */
/*
function slideTouch() {
let _start = 0, _end = 0;
$("#slide").on('touchstart', (e) => {
_start = e.originalEvent.targetTouches[0].pageX;
});
$('#slidd').on('touchmove', (e) => {
// _end = (_start - e.originalEvent.targetTouches[0].pageX);
_end = e.originalEvent.targetTouches[0].pageX;
});
$('#slide').on('touchend', (e) => {
if ((_start - _end) < -100) { //【起點-終點】的絕對值 >100,故 x<-100 & x>100
left();
_end = 0;
} else if ((_start - _end) > 100) {
right();
_end = 0;
}
});
}*/
/* js原生寫法 slideTouch(),作用完全同上,觸控滑動切換 */
function slideTouch() {
let _start = 0, _end = 0,
_ele = document.getElementById('slide');
_ele.addEventListener('touchstart', touchStart, false);
_ele.addEventListener('touchmove', touchMove, false);
_ele.addEventListener('touchend', touchEnd, false);
function touchStart(e) {
_start = e.targetTouches[0].pageX;
}
function touchMove(e) {
_end = e.targetTouches[0].pageX;
}
function touchEnd(e) {
if ((_start - _end) < -100) { //【起點-終點】的絕對值 >100,故 x<-100 & x>100
left();
_end = 0;
} else if ((_start - _end) > 100) {
right();
_end = 0;
}
}
}
</script>
View Code
效果如下圖：只顯示三張，太多圖的話，手機移動端顯示不下
