前言：
环境： window 10, 谷歌浏览器
需求
实现多个图片按一定时间逐个显示，并可以按鼠标选择对应的图书
代码
- html
<html>
<head>
<title>轮播图</title>
<!-- 导入轮播 CSS -->
<link rel="stylesheet" href="autoPlay.css"/>
<!-- 导入轮播 JS -->
<script type="text/javaScript" src="autoPlay.js"></script>
</head>
<body>
<!-- 图书商场首页轮播图 start -->
<div id="box_autoplay">
<div class="list">
<ul>
<li><img src="ad/index_ad1.jpg" width="660px" height="255px" /></li>
<li><img src="ad/index_ad2.jpg" width="660px" height="255px" /></li>
<li><img src="ad/index_ad3.jpg" width="660px" height="255px" /></li>
<li><img src="ad/index_ad4.jpg" width="660px" height="255px" /></li>
<li><img src="ad/index_ad5.jpg" width="660px" height="255px" /></li>
</ul>
</div>
</div>
</body>
</html>
- css
body, div, ul, li {
margin:0;
padding:0;
}
ul {
list-style-type:none;
}
#box_autoplay {
position:relative;
660px;
height:255px;
background:#fff;
border-radius:5px;
border:8px solid #fff;
margin:10px auto;
cursor:pointer;
}
#box_autoplay .list {
position:relative;
660px;
height:255px;
overflow:hidden;
}
#box_autoplay .list ul {
position:absolute;
top:0;
left:0;
}
#box_autoplay .list li {
660px;
height:255px;
overflow:hidden;
}
#box_autoplay .count {
position:absolute;
right:0;
bottom:5px;
}
#box_autoplay .count li {
color:#fff;
float:left;
20px;
height:20px;
cursor:pointer;
margin-right:5px;
overflow:hidden;
background:#F90;
opacity:0.7;
filter:alpha(opacity=70);
border-radius:20px;
}
#box_autoplay .count li.current {
color:#fff;
opacity:1;
filter:alpha(opacity=100);
font-weight:700;
background:#f60;
}
- 使用纯 js
注意不能导入 JQuery 库，不然会导致程序出错（如下图所示）。
//获取ID
var $ = function (id) {return typeof id === "string" ? document.getElementById(id) : id;};
//获取tagName
var $$ = function (tagName, oParent) {return (oParent || document).getElementsByTagName(tagName);};
//自动播放对象
var AutoPlay = function (id) {this.initialize(id);};
AutoPlay.prototype = {
initialize: function (id)
{
var oThis = this;
this.oBox = $(id);
this.oUl = $$("ul", this.oBox)[0];
this.aImg = $$("img", this.oBox);
this.timer = null;
this.autoTimer = null;
this.iNow = 0;
this.creatBtn();
this.aBtn = $$("li", this.oCount);
this.toggle();
this.autoTimer = setInterval(function ()
{
oThis.next();
}, 3000);
this.oBox.onmouseover = function ()
{
clearInterval(oThis.autoTimer);
};
this.oBox.onmouseout = function ()
{
oThis.autoTimer = setInterval(function ()
{
oThis.next();
}, 3000);
};
for (var i = 0; i < this.aBtn.length; i++)
{
this.aBtn[i].index = i;
this.aBtn[i].onmouseover = function ()
{
oThis.iNow = this.index;
oThis.toggle();
};
}
},
creatBtn: function ()
{
this.oCount = document.createElement("ul");
this.oFrag = document.createDocumentFragment();
this.oCount.className = "count";
for (var i = 0; i < this.aImg.length; i++)
{
var oLi = document.createElement("li");
oLi.innerHTML = i + 1;
this.oFrag.appendChild(oLi);
}
this.oCount.appendChild(this.oFrag);
this.oBox.appendChild(this.oCount);
},
toggle: function ()
{
for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
this.aBtn[this.iNow].className = "current";
this.doMove(-(this.iNow * this.aImg[0].offsetHeight));
},
next: function ()
{
this.iNow++;
this.iNow == this.aBtn.length && (this.iNow = 0);
this.toggle();
},
doMove: function (iTarget)
{
var oThis = this;
clearInterval(oThis.timer);
oThis.timer = setInterval(function ()
{
var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px");
}, 30);
}
};
window.onload = function ()
{
new AutoPlay("box_autoplay");
};
- 纯 JS 改进版
/**
* 用 纯 js 文件写自动轮播图，最好不要用 $ 作为 函数名
* 不然后期由于业务需求使用 Jquery 库，会导致 用 纯Js 写$ 函数失效，导致程序发生问题
*
* **/
//获取ID
var getID = function(id) {
return typeof id === "string" ? document.getElementById(id) : id;
};
//获取tagName
var getTageOP = function(tagName, oParent) {
return (oParent || document).getElementsByTagName(tagName);
};
//自动播放对象
var AutoPlay = function(id) {
this.initialize(id);
};
AutoPlay.prototype = {
initialize : function(id) {
var oThis = this;
this.oBox = getID(id);
this.oUl = getTageOP("ul", this.oBox)[0];
this.aImg = getTageOP("img", this.oBox);
this.timer = null;
this.autoTimer = null;
this.iNow = 0;
this.creatBtn();
this.aBtn = getTageOP("li", this.oCount);
this.toggle();
this.autoTimer = setInterval(function() {
oThis.next();
}, 3000);
this.oBox.onmouseover = function() {
clearInterval(oThis.autoTimer);
};
this.oBox.onmouseout = function() {
oThis.autoTimer = setInterval(function() {
oThis.next();
}, 3000);
};
for (var i = 0; i < this.aBtn.length; i++) {
this.aBtn[i].index = i;
this.aBtn[i].onmouseover = function() {
oThis.iNow = this.index;
oThis.toggle();
};
}
},
creatBtn : function() {
this.oCount = document.createElement("ul");
this.oFrag = document.createDocumentFragment();
this.oCount.className = "count";
for (var i = 0; i < this.aImg.length; i++) {
var oLi = document.createElement("li");
oLi.innerHTML = i + 1;
this.oFrag.appendChild(oLi);
}
this.oCount.appendChild(this.oFrag);
this.oBox.appendChild(this.oCount);
},
toggle : function() {
for (var i = 0; i < this.aBtn.length; i++)
this.aBtn[i].className = "";
this.aBtn[this.iNow].className = "current";
this.doMove(-(this.iNow * this.aImg[0].offsetHeight));
},
next : function() {
this.iNow++;
this.iNow == this.aBtn.length && (this.iNow = 0);
this.toggle();
},
doMove : function(iTarget) {
var oThis = this;
clearInterval(oThis.timer);
oThis.timer = setInterval(function() {
var iSpeed = (iTarget - oThis.oUl.offsetTop) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer)
: (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed
+ "px");
}, 30);
}
};
window.onload = function() {
new AutoPlay("box_autoplay");
};