<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>H5輪播</title>
<style type="text/css">
* { margin: 0; padding: 0; }
.box { position: relative; width: 100%; max-width: 768px; height: 180px; margin: 0 auto; box-sizing: border-box; }
.wrap { position: relative; width: 100%; max-width: 768px; height: 180px; overflow: hidden; }
.content { position: absolute; top: 0; left: 0; width: 100%; max-width: 768px; height: 180px; background: #CCC; line-height: 180px; color: #000; text-align: center; font-size: 100px; z-index: 22; }
.content.cur { z-index: 25; }
.dot { position: absolute; bottom: 15px; left: 0; width: 100%; height: 20px; text-align: center; z-index: 55; }
.dot i { display: inline-block; width: 10px; height: 10px; margin: 0 5px; background: #000; border-radius: 50%; }
.dot i.bg { background: red; }
</style>
</head>
<body>
<div class="box">
<div class="wrap" id="slideMain">
<div class="content cur">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
<div class="dot" id="slideItem"><i class="bg"></i><i></i><i></i><i></i><i></i></div>
</div>
<script type="text/javascript">
var slideImg = {
initNum: 0,
bgImg: ["activity1/1.jpg", "activity1/2.jpg", "activity1/3.jpg", "activity1/4.jpg", "activity1/5.jpg"],
init: function (opts) {//執行的函數
var opts = opts || {
slideMain: "slideMain",
slideItem: "slideItem"
};
this.pageRun(opts);
this.bindEvent(opts);
this.bindBg(opts, slideImg.bgImg);
},
bindBg: function (opts, bgImg) {//給輪播綁定背景圖檔
var slideContent = document.querySelectorAll("#" + opts.slideMain + " .content");
for (var i = 0; i < slideContent.length; i++) {
slideContent[i].style.background = "url(" + bgImg[i] + ") no-repeat center";
slideContent[i].style.backgroundSize = "100%";
}
},
pageRun: function (opts) {//滑過邏輯，計算出initNum索引
var _this = this;
var getxy = {
x: 0,
y: 0
};
var slideMain = document.getElementById(opts.slideMain);
var slideContent = document.querySelectorAll("#" + opts.slideMain + " .content");
var moveX = null;
var moveY = null;
if (slideMain) {
slideMain.addEventListener("touchstart", function (e) {
var e = e || window.event;
getxy.x = e.changedTouches[0].pageX;
getxy.y = e.changedTouches[0].pageY;
}, false);
slideMain.addEventListener("touchmove", function (e) {
var e = e || window.event;
e.preventDefault();
moveX = e.changedTouches[0].pageX;
moveY = e.changedTouches[0].pageY;
}, false);
slideMain.addEventListener("touchend", function (e) {
var e = e || window.event;
e.preventDefault();
moveX = e.changedTouches[0].pageX;
moveY = e.changedTouches[0].pageY;
if (moveX - getxy.x > 0) {
if (Math.abs(moveX - getxy.x) > 50) {
if (_this.initNum === 0) {
_this.initNum = slideContent.length - 1;
} else {
_this.initNum--;
}
_this.eleAnimate(opts, _this.initNum);
}
} else {
if (Math.abs(moveX - getxy.x) > 50) {
if (_this.initNum === slideContent.length - 1) {
_this.initNum = 0;
} else {
_this.initNum++;
}
_this.eleAnimate(opts, _this.initNum);
}
}
}, false);
}
},
bindEvent: function (opts) {//點選事件
var _this = this;
var slideItem = document.querySelectorAll("#" + opts.slideItem + " i");
if (slideItem) {
for (var i = 0; i < slideItem.length; i++) {
slideItem[i].index = i;
slideItem[i].addEventListener("click", function () {
var index = this.index;
_this.initNum = index;
_this.eleAnimate(opts, index);
}, false);
}
}
},
eleAnimate: function (opts, items) {//滑過最後一個img傳回第一個img事件
var items = items || 0;
var slideContent = document.querySelectorAll("#" + opts.slideMain + " .content");
var slideItem = document.querySelectorAll("#" + opts.slideItem + " i");
for (var i = 0; i < slideItem.length; i++) {
slideContent[i].classList.remove('cur');
slideItem[i].classList.remove('bg');
}
slideContent[items].classList.add('cur');
slideItem[items].classList.add('bg');
}
};
document.addEventListener("DOMContentLoaded", function () {
slideImg.init({
slideMain: "slideMain",
slideItem: "slideItem"
})
}, false);
</script>
</body>
</html>
![深入探讨并實作Unity圖像輪播深入探讨并實作Unity圖像輪播[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)