這是一個圖片輪播的程式碼，但是它們的是css 動畫，當時程式碼執行不了，我花了二天才修改，現在記錄一下，憑回憶用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>網易科技</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<style>
body, div, header, footer, strong, ul, li, span, h1, h2, a, img {
margin: 0;
padding: 0;
outline: none;
border: none;
font-family: "Microsoft Yahei", "微軟雅黑", Tahoma, Arial, Helvetica, STHeiti;
}
body, html {
min-height: 100%;
}
ol, ul {
list-style: none;
}
/* 其他樣式... */
.header {
height: 32px;
line-height: 32px;
background: #FC9;
text-align: center;
color: #F00;
font-size: 1em;
}
.nav, .footer-menu { /* 修正類名為 footer-menu */
display: block;
padding: 10px 0;
}
.nav a, .footer-menu a {
display: inline-block;
width: 30%;
padding: 3px;
text-decoration: none;
-webkit-box-sizing: border-box;
text-align: center;
}
.nav a:hover {
border-radius: 5px;
background: #C60;
color: #FFF; /* 移除重複的顏色宣告 */
}
/* 其餘樣式... */
#get-item a {
border-radius: 10px; /* 修正屬性名為 border-radius */
/* 其他樣式... */
}
/* 其餘樣式... */
</style>
</head>
<body>
<!-- Header -->
<header class="header">潮陽商城</header>
<!-- Navigation -->
<nav class="nav">
<a href="javascript:;">產品</a>
<a href="javascript:;">商家</a>
<a href="javascript:;">關於</a>
</nav>
<!-- Slide -->
<div class="slide" id="hotSlide">
<div class="slide-main" id="mainContent">
<!-- Slide images -->
</div>
<div id="get-item">
<!-- Pagination dots -->
</div>
</div>
<!-- Hot List -->
<ul class="hot-list">
<!-- List items -->
</ul>
<!-- Click More -->
<a href="javascript:;" class="click-more">檢視更多</a>
<!-- Class Info -->
<div class="class-info">
<!-- Class info content -->
</div>
<!-- Download App -->
<a href="javascript:;" class="downapp">
<img src="images/xiazai.png" alt="下載應用">
</a>
<!-- Footer Function Menu -->
<nav class="footer-menu">
<a href="javascript:;">高檔版</a>
<a href="javascript:;">高檔版</a>
<a href="javascript:;">高檔版</a>
</nav>
<!-- Footer -->
<footer class="footer">網易提意見</footer>
<script>
var hotSlide = {
hasProtoType: false,
newClass: function (ele) {
ele = ele || {};
if (this.hasProtoType == false) {
this.init.prototype = hotSlide;
this.hasProtoType = true;
}
return new this.init(ele);
},
getId: function (id) {
return typeof id == 'string' ? document.getElementById(id) : id;
},
prevPage: function () {
if (this.item == 0) {
this.item = this.lengths;
}
this.item--;
this.mainAnimate(this.item);
this.curAnimate(this.item);
},
nextPage: function () {
this.item++;
if (this.item == this.lengths) {
this.item = 0;
}
this.mainAnimate(this.item);
this.curAnimate(this.item);
},
bindEvent: function () {
var myThis = this;
var eleEvent = myThis.getId('hotSlide');
eleEvent.addEventListener('touchstart', function (e) {
myThis.initPage.x = e.changedTouches[0].pageX;
myThis.initPage.y = e.changedTouches[0].pageY;
}), eleEvent.addEventListener('touchmove', function (e) {
myThis.endPage.x = e.changedTouches[0].pageX;
myThis.endPage.y = e.changedTouches[0].pageY;
var xcurPage = myThis.endPage.x - myThis.initPage.x - myThis.item * myThis.winWidth;
myThis.mainContent.style.webkitTransform = 'translate3d(-' + xcurPage + 'px, 0, 0)';
}), eleEvent.addEventListener('touchend', function (e) {
if (Math.abs(myThis.endPage.x - myThis.initPage.x) > 50) {
if (myThis.endPage.x - myThis.initPage.x < 0) {
myThis.prevPage();
} else {
myThis.nextPage();
}
} else {
myThis.mainContent.style.webkitTransform = 'translate3d(' + myThis.item * myThis.winWidth + 'px, 0, 0)';
}
})
},
mainAnimate: function () {
var _this = this;
_this.mainContent.style.webkitTransition = '0.4s';
_this.mainContent.style.webkitTransform = "translate3d(-" + (_this.item * _this.winWidth) + "px, 0, 0)";
},
curAnimate: function (getItem) {
for (var k = 0; k< this.getItem.length; k++) {
this.getItem[k].className = '';
}
this.getItem[getItem].className = 'cur';
},
init: function (ele) {
var _this = this;
_this.item = 0;
_this.hotSlide = _this.getId('hotSlide');
_this.mainContent = _this.getId('mainContent');
_this.slideCont = _this.mainContent.getElementsByTagName('div');
_this.winWidth = window.innerWidth;
_this.lengths = _this.slideCont.length;
for (var i = 0; i < _this.lengths; i++) {
_this.slideCont[i].style.width = _this.winWidth + 'px';
}
_this.getItem = _this.getId('get-item').getElementsByTagName('a');
_this.initPage = { x: 0, y: 0 }
_this.endPage = { x: 0, y: 0 }
_this.bindEvent(ele);
}
};
pageObj = { wrap: 'slide' }
hotSlide.newClass(pageObj);
</script>
</body>
</html>