js文件内容:
window.onload = function () {
var oBox = document.getElementById("box");var oList = oBox.getElementsByTagName("ul")[0];
var aImg = oBox.getElementsByTagName("img");
var timer = playTimer = null;
var index = i = 0;
var bOrder = true;
var aTmp = [];
var aBtn = null;
//生成数字按钮
for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>"); //push放入数组
//插入元素
var oCount = document.createElement("ul");
oCount.className = "count";
oCount.innerHTML = aTmp.join(""); //join放入字符串
oBox.appendChild(oCount);
aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
//初始化状态
cutover();
//按钮点击切换
for (i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onmouseover = function () { index = this.index; cutover() }
}
function cutover() {
for (i = 0; i < aBtn.length; i++)
aBtn[i].className = "";
aBtn[index].className = "current";
startMove(-(index * aImg[0].offsetHeight))
}
function next() {
bOrder ? index++ : index--; //index=0;从第一幅图开始
index <= 0 && (index = 0, bOrder = true);
index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
cutover()
}
playTimer = setInterval(next, 3000);
//鼠标移入展示区停止自动播放
oBox.onmouseover = function () { clearInterval(playTimer) };
//鼠标离开展示区开始自动播放
oBox.onmouseout = function () { playTimer = setInterval(next, 3000) };
function startMove(iTarget) {
clearInterval(timer);
timer = setInterval(function () { doMove(iTarget) }, 30)
}
function doMove(iTarget) {
var iSpeed = (iTarget - oList.offsetTop) / 10;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px";
}
};
页面前端:
<style type="text/css">
div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
#box{position:relative;width:958px;height:500px;background:transparent;cursor:pointer;}
#box .list{position:relative;width:auto;height:500px;overflow:hidden;}
#box .list ul{position:absolute;margin-left:0px; width:auto;}
#box .list li{width:auto;height:498px;overflow:hidden;margin-left:-17px; padding:0px;}
#box .list li img{ height:500px; width:100%;}
#box .count{position:absolute;right:14px;bottom:5px;}
#box .count li{color:#fff;float:left; text-align:center; width:19px;height:19px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;}
#box .count li.current{color:#fff;font-weight:600;background:#6cf;}
</style>
<div id="box">
<div class="list">
<ul>
<li>
<img src="img/123.jpg" />
</li>
<li>
<img src="img/234.jpg" />
</li>
<li>
<img src="img/345.jpg" />
</li>
</ul>
</div>
</div>