原生版轮播图（面对对象）
一、代码分两个部分：
1、HTML部分，根据注释处理即可；
2、play.js插件部分，这里为了展示效果，直接写在<html></html>下的<script></script>标签里。
3、效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。
4、这里可以预览效果。
二、轮播图原理说明：
（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）步骤。
三、使用时，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>
写法二：
<!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>
用CSS3实现轮播效果，轮播的触发条件是将鼠标放在轮播区上。
<!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;
width: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;
width:4000px;
height:400px;
}
#bbb div{
width:800px;
height:400px;
float:left;
}
#bbb div img{
width: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>
jQuery版轮播图 一、代码分两个部分：1、HTML部分，根据注释处理即可；2、基于jQuery的play.js插件部分，这里为了展示效果，直接写在下的标签里。3、效果包含：自动轮播，焦点对齐，前进后退，直走不返，鼠标进入、轮播停止且前进后退图标出现，鼠标离开、轮播重启且前进后退图标隐藏。4、这里可以预览效果。 二、轮播图原理说明： （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）步骤。 三、也可以用命名空间的方式进行扩展：
<!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>
