首页 > 代码库 > 用JS写一个简单的轮播器
用JS写一个简单的轮播器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{
background: gray;
}
div{
width: 300px;height: 400px;
margin: 0 auto;
position: relative;
}
img{width: 300px;height: 400px;}
ul{
margin: 0;padding: 0;
position: absolute;
right: -60px;
top: 0;
}
li{
border: 1px solid black;
width: 50px;
height: 40px;
margin-bottom: 5px;
list-style-type: none;
}
.active{
background: orange;
}
p,span{
width: 300px;
height: 40px;
font-size: 20px;
font-family: "微软雅黑";
color: white;
text-align: center;
line-height: 40px;
position: absolute;
margin: 0;
background: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
span{
top:0;
left: 0;
}
p{
bottom: 0;
}
</style>
<script>
window.onload = function(){
var oP = document.getElementsByTagName(‘p‘)[0]; //getElementsByTagName获得到的元素必须加上索引，不然没效果
var oSpan = document.getElementsByTagName(‘span‘)[0];
var oUl = document.getElementsByTagName(‘ul‘)[0];
var aLi = document.getElementsByTagName(‘li‘);
var oImg = document.getElementsByTagName(‘img‘)[0];
var aText = [‘美女1‘,‘美女2‘,‘美女3‘,‘美女4‘];
var aUrl = [‘01.JPG‘,‘02.JPG‘,‘03.JPG‘,‘04.JPG‘];
//初始化
var num = 0;
oP.innerHTML = 1+num+‘/‘+aText.length;
oImg.src = http://www.mamicode.com/aUrl[num];
oSpan.innerHTML = aText[num];
for(var i=0;i<aText.length;i++){
aLi[i].index = i; //i放在此次，不能放在下面的function
aLi[i].onclick = function(){
oImg.src = http://www.mamicode.com/aUrl[this.index];
oP.innerHTML = this.index+‘/‘+aText.length;
oSpan.innerHTML = aUrl[this.index];
for(var i=0;i<aText.length;i++){ //清空样式
aLi[i].className = ‘‘;
}
this.className = ‘active‘; //添加样式
}
}
}
</script>
</head>
<body>
<div>
<img />
<span></span>
<p></p>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
简化的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body{
background: gray;
}
div{
width: 300px;height: 400px;
margin: 0 auto;
position: relative;
}
img{width: 300px;height: 400px;}
ul{
margin: 0;padding: 0;
position: absolute;
right: -60px;
top: 0;
}
li{
border: 1px solid black;
width: 50px;
height: 40px;
margin-bottom: 5px;
list-style-type: none;
}
.active{
background: orange;
}
p,span{
width: 300px;
height: 40px;
font-size: 20px;
font-family: "微软雅黑";
color: white;
text-align: center;
line-height: 40px;
position: absolute;
margin: 0;
background: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
span{
top:0;
left: 0;
}
p{
bottom: 0;
}
</style>
<script>
window.onload = function(){
var oP = document.getElementsByTagName(‘p‘)[0];
var oSpan = document.getElementsByTagName(‘span‘)[0];
var oUl = document.getElementsByTagName(‘ul‘)[0];
var aLi = document.getElementsByTagName(‘li‘);
var oImg = document.getElementsByTagName(‘img‘)[0];
var aText = [‘美女1‘,‘美女2‘,‘美女3‘,‘美女4‘];
var aUrl = [‘01.JPG‘,‘02.JPG‘,‘03.JPG‘,‘04.JPG‘];
//初始化
var num = 0;
function fInit(){
oP.innerHTML = 1+num+‘/‘+aText.length;
oImg.src = http://www.mamicode.com/aUrl[num];
oSpan.innerHTML = aText[num];
for(var i=0;i<aText.length;i++){
aLi[i].className = ‘‘;
}
}
fInit()
for(var i=0;i<aText.length;i++){
aLi[i].index = i;
aLi[i].style.cursor = ‘pointer‘;
aLi[i].onmouseover = function(){
num = this.index; //num放在此次
fInit();
this.className = ‘active‘;
}
}
}
</script>
</head>
<body>
<div>
<img />
<span></span>
<p></p>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
用JS写一个简单的轮播器