用JS实现的简单轮播图
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>slideshow</title> | |
<style type="text/css"> | |
*{ | |
margin:0; | |
padding:0; | |
} | |
.frame{ | |
position: relative; | |
width: 672px; | |
height: 370px; | |
/*border:1px solid red;*/ | |
margin: 0 auto; | |
} | |
.frame ul{ | |
list-style: none; | |
} | |
.frame ul li{ | |
display: none; | |
} | |
.leftbtn{ | |
width: 55px; | |
height: 55px; | |
position: absolute; | |
left: 0; | |
top: 150px; | |
margin-top: -27px; | |
background:url(images/slide-btnL.png) no-repeat; | |
cursor: pointer; | |
} | |
.rightbtn{ | |
width: 55px; | |
height: 55px; | |
position: absolute; | |
right: 0; | |
top: 150px; | |
margin-top: -27px; | |
background:url(images/slide-btnR.png) no-repeat; | |
cursor: pointer; | |
} | |
.circle{ | |
position: absolute; | |
width: 100px; | |
height: 10px; | |
bottom: 22px; | |
left: 50%; | |
margin-left: -50px; | |
} | |
.circle ol{ | |
list-style: none; | |
} | |
.circle ol li{ | |
float: left; | |
width: 7px; | |
height: 7px; | |
background: url(images/ico.png) no-repeat -137px -132px; | |
margin-right: 13px; | |
border-radius: 50%; | |
cursor: pointer; | |
} | |
.frame ul li.checked{ | |
display: block; | |
} | |
.circle ol li.opt{ | |
background:url(images/ico.png) no-repeat -124px -132px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="frame" > | |
<ul id="Frame"> | |
<li class="checked"><img src="images/aaa.jpg"></li> | |
<li><img src="images/bbb.jpg"></li> | |
<li><img src="images/ccc.jpg"></li> | |
<li><img src="images/ddd.jpg"></li> | |
<li><img src="images/eee.jpg"></li> | |
</ul> | |
<div class="leftbtn" id="lbtn"></div> | |
<div class="rightbtn" id="rbtn"></div> | |
<div class="circle" id="dot"> | |
<ol> | |
<li class="opt"></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
<li></li> | |
</ol> | |
</div> | |
</div> | |
<script type="text/javascript"> | |
var oframe = document.getElementById("Frame").getElementsByTagName("li"); | |
var olbtn = document.getElementById("lbtn"); | |
var orbtn = document.getElementById("rbtn"); | |
var odot = document.getElementById("dot").getElementsByTagName("li"); | |
var semaphore = 0; | |
orbtn.onclick = function(){ | |
semaphore++; | |
if (semaphore > 4) { | |
semaphore = 0; | |
} | |
slideshow(); | |
} | |
olbtn.onclick = function(){ | |
semaphore--; | |
if (semaphore < 0) { | |
semaphore = 4; | |
} | |
slideshow(); | |
} | |
// IEFF!!!!!!!!!!!!!!!!!!!!!! | |
for (var i = 0; i < odot.length; i++) { | |
(function(i){ | |
odot[i].onmouseover = function(){ | |
semaphore = i; | |
slideshow(); | |
} | |
}(i))}; | |
function slideshow(){ | |
for (var i = 0; i < oframe.length; i++) { | |
oframe[i].className = ""; | |
} | |
oframe[semaphore].className = "checked"; | |
for (var i = 0; i < odot.length; i++) { | |
odot[i].className = ""; | |
} | |
odot[semaphore].className = "opt"; | |
} | |
</script> | |
</body> | |
</html> |
因为上传不了整个文件包,所以只有代码,里面的图面可以换成自己的路径。我已经测试了效果。希望大神们给我改进的意见。