[Web前端技术] javascript实现图片轮播

[Web前端技术] javascript实现图片轮播
图片轮播在我们实际开发的过程中使用的频率非常多在Jquery插件当道的时代，原生js的逻辑性更显得尤为重要，希望一下代码能对各位有所帮助！
< !DOCTYPE html>
< html lang="en">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>JS幻灯代码</title>
< script type="text/javascript">
window.onload = function () {
flag = 0;
obj1 = document.getElementById("slider");
obj2 = document.getElementsByTagName("li");
obj2[0].style.backgroundColor = "#666666";
//默认被选中颜色
time = setInterval("turn();", 5000);
obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}
//延迟加载图片，演示的时候，使用本地图片
//上线后请改为二级域名提供的图片地址
document.getElementById("second").src = "images/2.png";
//使用图片宽660，高550
document.getElementById("third").src = "images/3.png";
document.getElementById("four").src = "images/4.png";
}
function turn(value) {
if (value != null) {
flag = value - 2;
}
if (flag < obj2.length - 1)
else
flag = 0;
obj1.style.top = flag * (-550) + "px";
for (var j = 0; j < obj2.length; j++) {
obj2[j].style.backgroundColor = "#ffffff";
}
obj2[flag].style.backgroundColor = "#666666"; }
< /script>
< style type="text/css">
#wrap
{
height: 550px;
width: 660px;
overflow: hidden;
position: relative;
overflow: hidden;
}
#wrap ul
{
list-style: none;
position: absolute;
top: 500px;
left: 450px;
}
#wrap li
{
margin-left:2px;
opacity: .3;
filter: alpha(opacity=30);
text-align: center;
line-height: 30px;
font-size: 20px;
height: 30px;
width: 30px;
background-color: #fff;
float: left;
border-radius:3px;
cursor:pointer;
}
#slider
{
position: absolute;
left: 0px;
}
#slider img
{
float: left;
border: none;
}
< /style>
< /head>
< body>
< div id="wrap">
< div id="slider">
< a target="_blank" href="#"><img src="images/1.png" /></a> < a target="_blank" href="#"><img id="second" /></a>
< a target="_blank" href="#"><img id="third" /></a>
< a target="_blank" href="#"><img id="four" /></a>
< /div>
< ul>
< li>1</li>
< li>2</li>
< li>3</li>
< li>4</li>
< /ul>
< /div>
< /body>
< /html>。