用JS写一个简单的轮播器

浏览数：39 / 时间：2015年06月09日

<!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 = 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 = 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 = 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>