这是一个图片轮播的代码,但是它们的是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>
标签:function,style,mainContent,代码,var,item,猪猪,myThis,2016 From: https://www.cnblogs.com/ZzwWan/p/18251069