使用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++;elseflag = 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>

,找一个让心里安静和干净的地方,

使用JS制作简易图片轮播效果

相关文章:

你感兴趣的文章:

标签云: