一、CSS3版轮播图 用CSS3实现轮播效果，轮播的触发条件是将鼠标放在轮播区上。 ```html:run <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } @keyframes aaa { from {left:0;} to {left:-4000px;} } #aaa{ margin:0 auto; 800px; height:400px; overflow: hidden; position: relative; } #aaa{ background: 100% no-repeat url(https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png); } #aaa:after{ content: ""; display: block; padding-top: 50%; } #bbb{ position: absolute; 4000px; height:400px; } #bbb div{ 800px; height:400px; float:left; } #bbb div img{ 100%; height:100%; } #bbb:hover{ animation: aaa 15s ease-in 0.5s infinite; } </style> </head> <body> <div id="aaa"> <div id="bbb"> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" alt=""/></div> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" alt=""/></div> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" alt=""/></div> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" alt=""/></div> <div><img src="https://cdn.files.qdfuns.com/article/content/picture/201804/15/111910vud6uk66ur65d6dv.png" alt=""/></div> </div> </div> </body> </html> ``` 二、原生版轮播图（面对对象） 1、代码分两个部分： （1）HTML部分，根据注释处理即可； （2）play.js插件部分，这里为了展示效果，直接写在<html></html>下的<script></script>标签里。 （3）效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。 （4）这里可以预览效果。 2、轮播图原理说明： （1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后， （2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒； （3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推 （4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意 （5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。 3、使用时，id="boxQC"，这个id不能改动；"可增减区域"里的div可增可减；new Banner('1000px', '500px')，这里的参数可以变化。 写法一： ```html:run <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容，在实际项目中可以不要*/ * { margin: 0; padding: 0; } </style> </head> <body> <!--body标签里的内容，没说可以增减或更改的，不要增减或更改--> <div id="boxQC"> <div> <!--以下是可增减区域--> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" alt=""/> </div> <!--以上是可增减区域--> </div> </div> </body> </html> <script> function Banner(width, height) {/*类*/ /*以下最外层div*/ var that = this; this.width = width; this.height = height; this.oBox = document.getElementById("boxQC"); this.oBox.style.width = width; this.oBox.style.height = height; this.oBox.style.margin = "0 auto"; this.oBox.style.overflow = "hidden"; this.oBox.style.position = "relative"; /*以下轮播区的div*/ this.oBoxInner = this.oBox.getElementsByTagName('div')[0]; this.oBoxInner.style.height = height; this.oBoxInner.style.position = "absolute"; this.oBoxInner.style.left = 0; this.oBoxInner.style.right = 0; this.aDiv = this.oBoxInner.getElementsByTagName('div');//单个轮播图 this.oBoxInner.innerHTML/* 轮播区的内部后面*/ += this.aDiv[0].outerHTML/*第一个轮播图片的外部*/; this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//轮播区的宽度 for (var i = 0; i < this.aDiv.length; i++) {/*遍历轮播区的每个div及其内部的图片*/ this.aDiv[i].style.width = width; this.aDiv[i].style.height = height; this.aDiv[i].style.float = "left"; this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName('img')[0]; this.aDiv[i].aImg.style.width = "100%"; this.aDiv[i].aImg.style.height = "100%"; } /*以下是焦点区部分（定位在轮播区的右下方）*/ var oUl = document.createElement('ul'); for (i = 0; i < this.aDiv.length - 1; i++) { oUl.innerHTML += '<li class=' + i + '===1?"on":null></li>'; } this.oBox.appendChild(oUl); this.oUl = this.oBox.getElementsByTagName('ul')[0]; this.oUl.style.position = "absolute"; this.oUl.style.right = "10px"; this.oUl.style.bottom = "10px"; this.aLi = this.oUl.getElementsByTagName('li'); for (i = 0; i < this.aLi.length; i++) {/*遍历焦点区的每个焦点*/ this.aLi[i].style.width = "18px"; this.aLi[i].style.height = "18px"; this.aLi[i].style.float = "left"; this.aLi[i].style.listStyle = "none"; this.aLi[i].style.background = "green"; this.aLi[i].style.borderRadius = "50%"; this.aLi[i].style.marginLeft = "10px"; this.aLi[i].style.cursor = "pointer"; this.aLi[i].index = i; this.aLi[i].onclick = function () { that.step = this.index; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}); that.bannerTip(); } } /*以下是向左向右两个箭头式按钮*/ for (i = 0; i < 2; i++) { var oA = document.createElement('a'); oA.href = "javascript:;" this.oBox.appendChild(oA); } /*以下是左按钮（点击它，图片向左运动）*/ this.oBtnL = this.oBox.getElementsByTagName('a')[0]; this.oBtnL.style.width = "30px"; this.oBtnL.style.height = "30px"; this.oBtnL.style.position = "absolute"; this.oBtnL.style.top = (parseFloat(this.height) / 2 - 15) + "px"; this.oBtnL.style.left = "30px"; this.oBtnL.style.border = "10px solid red"; this.oBtnL.style.borderLeft = "none"; this.oBtnL.style.borderBottom = "none"; this.oBtnL.style.opacity = "0.3"; this.oBtnL.style.filter = "alpha(opacity=30)"; this.oBtnL.style.display = "none"; this.oBtnL.style.transform = "rotate(-135deg)"; this.oBtnL.onclick = function () { if (that.step <= 0) { that.step = that.aDiv.length - 1; that.css(that.oBoxInner, 'left', -that.step * parseFloat(that.width)); } that.step--; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}); that.bannerTip(); }; /*以下是右按钮（点击它，图片向右运动）*/ this.oBtnR = this.oBox.getElementsByTagName('a')[1]; this.oBtnR.style.width = "30px"; this.oBtnR.style.height = "30px"; this.oBtnR.style.position = "absolute"; this.oBtnR.style.top = (parseFloat(this.height) / 2 - 15) + "px"; this.oBtnR.style.right = "30px"; this.oBtnR.style.border = "10px solid red"; this.oBtnR.style.borderLeft = "none"; this.oBtnR.style.borderBottom = "none"; this.oBtnR.style.opacity = "0.3"; this.oBtnR.style.filter = "alpha(opacity=30)"; this.oBtnR.style.display = "none"; this.oBtnR.style.transform = "rotate(45deg)"; this.oBtnR.onclick = function () { if (that.step >= that.aDiv.length - 1) { that.step = 0; that.css(that.oBoxInner, 'left', 0) } that.step++; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}, 1000); that.bannerTip(); }; /*以下是其它*/ this.step = 0;//记录每次运动 this.timer = null;//定时器 this.init();//初始化轮播图 } Banner.prototype = {//类的原型 constructor: Banner, /*getCss：获取元素的属性值*/ getCss: function (curEle, attr) { var val = null; var reg = null; if (getComputedStyle) {//标准浏览器 val = getComputedStyle(curEle, false)[attr]; } else {//非标准浏览器 if (attr === 'opacity') { val = curEle.currentStyle.filter; //'alpha(opacity=10)' reg = /^alpha(opacity[=:](d+))$/i; return reg.test(val) ? reg.exec(val)[1] / 100 : 1; } val = curEle.currentStyle[attr]; } reg = /^[+-]?((d|([1-9]d+))(.d+)?)(px|pt|rem|em)$/i; return reg.test(val) ? parseInt(val) : val; }, /*setCss：设置元素的属性值*/ setCss: function (curEle, attr, value) { if (attr === 'float') { curEle.style.cssFloat = value; curEle.style.styleFloat = value; return; } if (attr === 'opacity') { curEle.style.opacity = value; curEle.style.filter = 'alpha(opacity=' + (value * 100) + ')'; return; } var reg = /^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i; if (reg.test(attr)) { if (!(value === 'auto' || value.toString().indexOf('%') !== -1)) { value = parseFloat(value) + 'px'; } } curEle.style[attr] = value; }, /*setGroupCss：设置元素的一组属性值*/ setGroupCss: function (curEle, options) { if (options.toString() !== '[object Object]') return; for (var attr in options) { this.setCss(curEle, attr, options[attr]); } }, /*css：getCss、setCss、setGroupCss的合写*/ css: function () { if (typeof arguments[1] === 'string') { if (typeof arguments[2] === 'undefined') { return this.getCss(arguments[0], arguments[1]);//当第三个参数不存在，是获取； } else { this.setCss(arguments[0], arguments[1], arguments[2]);//当第三个参数存在时，是设置； } } if (arguments[1].toString() === '[object Object]') { this.setGroupCss(arguments[0], arguments[1]);//设置元素的一组属性值 } }, /*animate：轮播图动画函数*/ /*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2： 定时器1里设置的时间>参数时间duration， 如果animate里不声明step变量step，里面使用step的地方，值不一致， 那么就会导致animation运行一次所需要的时间不等于duration。 */ animate: function (curEle, target, duration) { /*1.定义动画的运行轨迹*/ function tmpEffect(t, b, c, d) { return b + c / d * t;//开始时的位置+总变化/总时间*已经过去的时间 } /*2.为公式的每个参数做准备*/ var begin = {}; var change = {}; for (var attr in target) { begin[attr] = this.css(curEle, attr); change[attr] = target[attr] - begin[attr]; } duration = duration || 700; var time = 0; var that = this; var step = 10; /*初稿这里没有这个声明*/ /*3.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；*/ clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器 curEle.timer = setInterval(function () { time += step; /*4.定时器停止运动的条件（time>=duration）*/ if (time >= duration) { that.css(curEle, target); clearInterval(curEle.timer); return; } /*5.拿到每个属性的最新值，并且赋值给元素对应的属性；*/ for (var attr in target) { /*现在位置=开始位置+总距离/参数时间duration*time*/ var curPos = tmpEffect(time, begin[attr], change[attr], duration); that.css(curEle, attr, curPos); } }, step) }, /*初始化轮播图*/ init: function () { var that = this; /*1.开启自动轮播*/ /*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2： 定时器1里设置的时间>参数时间duration， 如果animate里不声明step变量step，里面使用step的地方，值不一致， 那么就会导致animation运行一次所需要的时间不等于duration。 */ this.timer = setInterval(function () { that.autoMove(); }, 2000); /*2.开启焦点，每个焦点与每张轮播图对应*/ this.bannerTip(); /*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/ this.over_out(); }, autoMove: function () { if (this.step >= this.aDiv.length - 1) { this.step = 0; this.css(this.oBoxInner, 'left', 0) } this.step++; this.animate(this.oBoxInner, {left: -this.step * parseFloat(this.width)}, 1000); this.bannerTip(); }, bannerTip: function () { var tmpStep = this.step >= this.aLi.length ? 0 : this.step; for (var i = 0; i < this.aLi.length; i++) { this.aLi[i].className = i === tmpStep ? 'on' : null; if (this.aLi[i].className === "on") { this.aLi[i].style.background = "red"; } else { this.aLi[i].style.background = "green"; } } }, over_out: function () { var that = this; that.oBox.onmouseover = function () { clearInterval(that.timer); that.oBtnL.style.display = 'block'; that.oBtnR.style.display = 'block'; }; that.oBox.onmouseout = function () { that.timer = setInterval(function () { that.autoMove() }, 2000); that.oBtnL.style.display = 'none'; that.oBtnR.style.display = 'none'; } } }; </script> <script> new Banner('1000px', '500px'); /*这两个参数分别是轮播区的宽和高，可以根据需要更改*/ </script> ``` 写法二： ```html:run <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容，在实际项目中可以不要*/ * { margin: 0; padding: 0; } </style> </head> <body> <!--body标签里的内容，没说可以增减或更改的，不要增减或更改--> <div id="boxQC"> <div> <!--以下是可增减区域--> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" alt=""/> </div> <!--以上是可增减区域--> </div> </div> </body> </html> <script> function Banner(width, height) {/*类*/ /*以下最外层div*/ var that = this; this.width = width; this.height = height; this.oBox = document.getElementById("boxQC"); this.oBox.style.width = width; this.oBox.style.height = height; this.oBox.style.margin = "0 auto"; this.oBox.style.overflow = "hidden"; this.oBox.style.position = "relative"; /*以下轮播区的div*/ this.oBoxInner = this.oBox.getElementsByTagName('div')[0]; this.oBoxInner.style.height = height; this.oBoxInner.style.position = "absolute"; this.oBoxInner.style.left = 0; this.oBoxInner.style.right = 0; this.aDiv = this.oBoxInner.getElementsByTagName('div');//单个轮播图 this.oBoxInner.innerHTML/* 轮播区的内部后面*/ += this.aDiv[0].outerHTML/*第一个轮播图片的外部*/; this.oBoxInner.style.width = parseFloat(width) * this.aDiv.length + "px";//轮播区的宽度 for (var i = 0; i < this.aDiv.length; i++) {/*遍历轮播区的每个div及其内部的图片*/ this.aDiv[i].style.width = width; this.aDiv[i].style.height = height; this.aDiv[i].style.float = "left"; this.aDiv[i].aImg = this.aDiv[i].getElementsByTagName('img')[0]; this.aDiv[i].aImg.style.width = "100%"; this.aDiv[i].aImg.style.height = "100%"; } /*以下是焦点区部分（定位在轮播区的右下方）*/ var oUl = document.createElement('ul'); for (i = 0; i < this.aDiv.length - 1; i++) { oUl.innerHTML += '<li class=' + i + '===1?"on":null></li>'; } this.oBox.appendChild(oUl); this.oUl = this.oBox.getElementsByTagName('ul')[0]; this.oUl.style.position = "absolute"; this.oUl.style.right = "10px"; this.oUl.style.bottom = "10px"; this.aLi = this.oUl.getElementsByTagName('li'); for (i = 0; i < this.aLi.length; i++) {/*遍历焦点区的每个焦点*/ this.aLi[i].style.width = "18px"; this.aLi[i].style.height = "18px"; this.aLi[i].style.float = "left"; this.aLi[i].style.listStyle = "none"; this.aLi[i].style.background = "green"; this.aLi[i].style.borderRadius = "50%"; this.aLi[i].style.marginLeft = "10px"; this.aLi[i].style.cursor = "pointer"; this.aLi[i].index = i; this.aLi[i].onclick = function () { that.step = this.index; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}); that.bannerTip(); } } /*以下是向左向右两个箭头式按钮*/ for (i = 0; i < 2; i++) { var oA = document.createElement('a'); oA.href = "javascript:;" this.oBox.appendChild(oA); } /*以下是左按钮（点击它，图片向左运动）*/ this.oBtnL = this.oBox.getElementsByTagName('a')[0]; this.oBtnL.style.width = "30px"; this.oBtnL.style.height = "30px"; this.oBtnL.style.position = "absolute"; this.oBtnL.style.top = (parseFloat(this.height) / 2 - 15) + "px"; this.oBtnL.style.left = "30px"; this.oBtnL.style.border = "10px solid red"; this.oBtnL.style.borderLeft = "none"; this.oBtnL.style.borderBottom = "none"; this.oBtnL.style.opacity = "0.3"; this.oBtnL.style.filter = "alpha(opacity=30)"; this.oBtnL.style.display = "none"; this.oBtnL.style.transform = "rotate(-135deg)"; this.oBtnL.onclick = function () { if (that.step <= 0) { that.step = that.aDiv.length - 1; that.css(that.oBoxInner, 'left', -that.step * parseFloat(that.width)); } that.step--; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}); that.bannerTip(); }; /*以下是右按钮（点击它，图片向右运动）*/ this.oBtnR = this.oBox.getElementsByTagName('a')[1]; this.oBtnR.style.width = "30px"; this.oBtnR.style.height = "30px"; this.oBtnR.style.position = "absolute"; this.oBtnR.style.top = (parseFloat(this.height) / 2 - 15) + "px"; this.oBtnR.style.right = "30px"; this.oBtnR.style.border = "10px solid red"; this.oBtnR.style.borderLeft = "none"; this.oBtnR.style.borderBottom = "none"; this.oBtnR.style.opacity = "0.3"; this.oBtnR.style.filter = "alpha(opacity=30)"; this.oBtnR.style.display = "none"; this.oBtnR.style.transform = "rotate(45deg)"; this.oBtnR.onclick = function () { if (that.step >= that.aDiv.length - 1) { that.step = 0; that.css(that.oBoxInner, 'left', 0) } that.step++; that.animate(that.oBoxInner, {left: -that.step * parseFloat(that.width)}, 1000); that.bannerTip(); }; /*以下是其它*/ this.step = 0;//记录每次运动 this.timer = null;//定时器 this.init();//初始化轮播图 } Banner.prototype.getCss = function (curEle, attr) {/*getCss：获取元素的属性值*/ var val = null; var reg = null; if (getComputedStyle) {//标准浏览器 val = getComputedStyle(curEle, false)[attr]; } else {//非标准浏览器 if (attr === 'opacity') { val = curEle.currentStyle.filter; //'alpha(opacity=10)' reg = /^alpha(opacity[=:](d+))$/i; return reg.test(val) ? reg.exec(val)[1] / 100 : 1; } val = curEle.currentStyle[attr]; } reg = /^[+-]?((d|([1-9]d+))(.d+)?)(px|pt|rem|em)$/i; return reg.test(val) ? parseInt(val) : val; }, Banner.prototype.setCss = function (curEle, attr, value) {/*setCss：设置元素的属性值*/ if (attr === 'float') { curEle.style.cssFloat = value; curEle.style.styleFloat = value; return; } if (attr === 'opacity') { curEle.style.opacity = value; curEle.style.filter = 'alpha(opacity=' + (value * 100) + ')'; return; } var reg = /^(width|height|top|right|bottom|left|((margin|padding)(top|right|bottom|left)?))$/i; if (reg.test(attr)) { if (!(value === 'auto' || value.toString().indexOf('%') !== -1)) { value = parseFloat(value) + 'px'; } } curEle.style[attr] = value; }, Banner.prototype.setGroupCss = function (curEle, options) {/*setGroupCss：设置元素的一组属性值*/ if (options.toString() !== '[object Object]') return; for (var attr in options) { this.setCss(curEle, attr, options[attr]); } }, Banner.prototype.css = function () {/*css：getCss、setCss、setGroupCss的合写*/ if (typeof arguments[1] === 'string') { if (typeof arguments[2] === 'undefined') { return this.getCss(arguments[0], arguments[1]);//当第三个参数不存在，是获取； } else { this.setCss(arguments[0], arguments[1], arguments[2]);//当第三个参数存在时，是设置； } } if (arguments[1].toString() === '[object Object]') { this.setGroupCss(arguments[0], arguments[1]);//设置元素的一组属性值 } }, /*animate：轮播图动画函数*/ /*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2： 定时器1里设置的时间>参数时间duration， 如果animate里不声明step变量step，里面使用step的地方，值不一致， 那么就会导致animation运行一次所需要的时间不等于duration。 */ Banner.prototype.animate = function (curEle, target, duration) { /*1.定义动画的运行轨迹*/ function tmpEffect(t, b, c, d) { return b + c / d * t;//开始时的位置+总变化/总时间*已经过去的时间 } /*2.为公式的每个参数做准备*/ var begin = {}; var change = {}; for (var attr in target) { begin[attr] = this.css(curEle, attr); change[attr] = target[attr] - begin[attr]; } duration = duration || 700; var time = 0; var that = this; var step = 10; /*初稿这里没有这个声明*/ /*3.开启一个定时器，让时间不断累加；根据时间和公式，求出最新的位置；*/ clearInterval(curEle.timer); //开起一个定时器前，先关闭没用的定时器 curEle.timer = setInterval(function () { time += step; /*4.定时器停止运动的条件（time>=duration）*/ if (time >= duration) { that.css(curEle, target); clearInterval(curEle.timer); return; } /*5.拿到每个属性的最新值，并且赋值给元素对应的属性；*/ for (var attr in target) { /*现在位置=开始位置+总距离/参数时间duration*time*/ var curPos = tmpEffect(time, begin[attr], change[attr], duration); that.css(curEle, attr, curPos); } }, step) }, Banner.prototype.init = function () {/*初始化轮播图*/ var that = this; /*1.开启自动轮播*/ /*定时器1里有自动播放，自动播放里有animation，animation里面又有定时器2： 定时器1里设置的时间>参数时间duration， 如果animate里不声明step变量step，里面使用step的地方，值不一致， 那么就会导致animation运行一次所需要的时间不等于duration。 */ this.timer = setInterval(function () { that.autoMove(); }, 2000); /*2.开启焦点，每个焦点与每张轮播图对应*/ this.bannerTip(); /*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/ this.overOrOut(); }, Banner.prototype.autoMove = function () { if (this.step >= this.aDiv.length - 1) { this.step = 0; this.css(this.oBoxInner, 'left', 0) } this.step++; this.animate(this.oBoxInner, {left: -this.step * parseFloat(this.width)}, 1000); this.bannerTip(); }, Banner.prototype.bannerTip = function () { var tmpStep = this.step >= this.aLi.length ? 0 : this.step; for (var i = 0; i < this.aLi.length; i++) { this.aLi[i].className = i === tmpStep ? 'on' : null; if (this.aLi[i].className === "on") { this.aLi[i].style.background = "red"; } else { this.aLi[i].style.background = "green"; } } }, Banner.prototype.overOrOut = function () { var that = this; that.oBox.onmouseover = function () { clearInterval(that.timer); that.oBtnL.style.display = 'block'; that.oBtnR.style.display = 'block'; }; that.oBox.onmouseout = function () { that.timer = setInterval(function () { that.autoMove() }, 2000); that.oBtnL.style.display = 'none'; that.oBtnR.style.display = 'none'; } } </script> <script> new Banner('1000px', '500px'); /*这两个参数分别是轮播区的宽和高，可以根据需要更改*/ </script> ``` 三、jQuery版轮播图 1、代码分两个部分： （1）HTML部分，根据注释处理即可； （2）基于jQuery的play.js插件部分，这里为了展示效果，直接写在<html></html>下的<script></script>标签里。 （3）效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。（4）这里可以预览效果。 2、轮播图原理说明： （1）轮播图（假设）有7张图片，“一”字排列，把第1张图片复制一次，放到第8张的位置，这样共有8张图片；轮播开始后， （2）整个第2秒内，第2张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒； （3）整个第3秒内，第3张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；以此类推 （4）整个第8秒内，第8张图片从开始出现到完全出现，耗时700毫秒，完全出现后再停留300毫秒；注意 （5）整个第9秒内，轮播图急速回到第1张图片完全出现的状态，耗时约0毫秒（即运行autoMove方法中if语句块的耗时），然后立即开始（2）步骤。 3、也可以用命名空间的方式进行扩展： <script> $.myPlugin = { banner: function (width, height) {----插件代码---- } }; </script> <script> $.myPlugin.banner('500px', '250px'); </script> ```html:run <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容，在实际项目中可以不要*/ * { margin: 0; padding: 0; } </style> </head> <body> <!--body标签里的内容，没说可以增减或更改的，不要增减或更改--> <div id="box"> <div> <!--以下是可增减区域--> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517848093_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517850750_mthumb.jpg" alt=""/> </div> <div><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517853171_mthumb.jpg" alt=""/> </div> <!--以上是可增减区域--> </div> </div> </body> </html> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> <script> (function($){ $.fn.extend({ banner: function (width, height) { var $oBox = $("#box"); /*以下最外层div*/ $oBox.css({ "height": height, "width": width, "margin": "0 auto", "overflow": "hidden", "position": "relative" }); /*以下轮播区的div*/ var $oBoxInner = $oBox.children('div'); var aDiv = $oBoxInner[0].innerHTML; /* 轮播区内部原来的值*/ var aDiv0 = $oBoxInner.children('div')[0].outerHTML; /*第一个轮播图片的外部*/ $oBoxInner.html(aDiv + aDiv0); /* 用jQuery的方法给轮播区内部重新赋值*/ var $width = parseFloat(width) * $oBoxInner.children('div').length + "px"; $oBoxInner.css({ "height": height, "width": $width, "position": "absolute", "left": 0, "right": 0, "float": "left" }); $oBoxInner = $oBox.children('div'); var $aDiv = $oBoxInner.children("div"); $aDiv.css({"width": width, "height": height, "float": "left"}); $aDiv.children('img').css({"width": "100%", "height": "100%"}); /*以下是焦点区部分（定位在轮播区的右下方）*/ $oBox.append("<ul></ul>"); var $ul = $oBox.children("ul"); var $li = ""; $aDiv.each(function (index) { if (index < $aDiv.length - 1) { $li += '<li></li>'; } }); $ul.append($li); $ul = $oBox.children("ul"); $ul.css({"position": "absolute", "right": "10px", "bottom": "10px"}); $li = $ul.children("li"); $li.css({ "width": "18px", "height": "18px", "float": "left", "listStyle": "none", "background": "green", "borderRadius": "50%", "marginLeft": "10px", "cursor": "pointer" }); /*以下是向左向右两个箭头式按钮*/ var $a = "<a href = 'javascript:;'></a><a href = 'javascript:;'></a>"; $oBox.append($a); /*以下是左按钮（点击它，图片向左运动）*/ var $oBtnL = $oBox.children('a').eq(0); $oBtnL.css({ "width": "30px", "height": "30px", "position": "absolute", "top": (parseFloat(height) / 2 - 15) + "px", "left": "30px", "border": "10px solid red", "borderLeft": "none", "borderBottom": "none", "opacity": 0.6, "filter ": "alpha(opacity=60)", "display": "none", "transform": "rotate(-135deg)" }); $oBtnL.click(function () { if ($step <= 0) { $step = $aDiv.length - 1; $oBoxInner.css('left', -$step * parseFloat(width)); } $step--; $oBoxInner.animate({left: -$step * parseFloat(width)}); $bannerTip(); }); /*以下是右按钮（点击它，图片向右运动）*/ var $oBtnR = $oBox.children('a').eq(1); $oBtnR.css({ "width": "30px", "height": "30px", "position": "absolute", "top": (parseFloat(height) / 2 - 15) + "px", "right": "30px", "border": "10px solid red", "borderLeft": "none", "borderBottom": "none", "opacity": 0.6, "filter": "alpha(opacity=60)", "display": "none", "transform": "rotate(45deg)" }); $oBtnR.click(function () { if ($step >= $aDiv.length - 1) { $step = 0; $oBoxInner.css('left', 0) } $step++; $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000); $bannerTip(); }); var $step = 0;//记录每次运动 var $timer = null;//定时器 $init();//初始化轮播图 function $init() { /*1.开启自动轮播*/ $timer = setInterval(function () { $autoMove(); }, 2000); /*2.开启焦点，每个焦点与每张轮播图对应*/ $bannerTip(); /*3.鼠标移入轮播区，轮播暂停；鼠标移出轮播区，轮播恢复*/ $over_out(); } $li.each(function (index) { $(this).on('click', function () { $step = index; $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000); $bannerTip(); }) }); function $autoMove() { if ($step >= $aDiv.length - 1) { $step = 0; $oBoxInner.css('left', 0) } $step++; $oBoxInner.animate({left: -$step * parseFloat(width)}, 1000); $bannerTip(); } function $bannerTip() { var tmpStep = $step >= $li.length ? 0 : $step; $li.each(function (index) { $li.eq(index).attr("class",index === tmpStep ? 'on' : null); if ($li.eq(index).attr("class") === "on") { $li.eq(index).css("background","red"); } else { $li.eq(index).css("background","green"); } }) } function $over_out() { $oBox.mouseover(function () { clearInterval($timer); $oBtnL.css({"display": "block"}); $oBtnR.css({"display": "block"}); }); $oBox.mouseout(function () { $timer = setInterval(function () { $autoMove() }, 2000); $oBtnL.css({"display": "none"}); $oBtnR.css({"display": "none"}); }); } } }) })(jQuery) </script> <script> $("#box").banner('500px', '250px'); </script> ``` 附1：css3前缀 1、css3前缀的问题 （1）transform:rotate(-3deg);-webkit-transform:rotate(-3deg); （2）如果我正在使用的谷歌浏览器，能渲染transform属性，那么我为什么要写成-webkit-transform？ （3）如果我正在使用的谷歌浏览器，不能渲染transform属性，那么我写成-webkit-transform又有啥用？ 2、CSS3的前缀意思是 （1）尽管transform属性尚未成为W3C标准的一部分 （2）但我正在使用的这个版本的谷歌浏览器----有可能----可以渲染它了 （3）如果这个谷歌浏览器版本过于老旧，那么我加了前缀做兼容也没法实现这个旋转效果，所谓的做兼容也是有局限性的 （4）如果非要实现这个rotate(-3deg)效果，那么只能用一张有旋转效果的图片，来替代这个css代码，这叫优雅降级