JS实现简易图片轮播效果的方法

本文实例讲述了JS实现简易图片轮播效果的方法。分享给大家供大家参考。具体如下：
这里使用JS制作简易图片轮播效果：
制作比较粗糙，使用的图片是width：660ppx,height：550px;
效果图如下：

代码部分如下：

<！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，高550document.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） flag++;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;top: 0px;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>

希望本文所述对大家的javascript程序设计有所帮助。