这是一个图片轮播的代码，但是它们的是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>
