一份简单的轮播图代码-CFANZ编程社区

一份简单的轮播图代码_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 type="text/css">

#banner_lun_bo_img_box{
   width:960px;
   height:314px; 
   margin: 0 auto; 
   position:relative;
}
#banner_lun_bo_a{
   display: block; 
   width:100%; 
   height:100%;
}
#banner_lun_bo_img{
   display:block;
   width:auto;
   height:auto;
   max-width:100%;
   max-height:100%;
}

#banner_lun_bo_img_desc{
   position:absolute; 
   left: 5px; 
   bottom:5px;
   color:#FFF;
}
.banner_lun_bo_img_ul li
{
   float: left;
   width:20px;
   height:20px;
   border: 1px dashed  #aaa;
   margin: 5px;
   padding: 0;
   list-style:none;
   background-color: white;
   color:black;
   text-align: center;
}
.banner_lun_bo_img_ul li a{
   color: black;
   text-decoration: none;
   padding: 0;
   display: inline-block;
   width: 100%;
   height: 100%;
}


</style>

</head>

<body>

<div id="banner_lun_bo_img_box">
    <a href="javascript:;" id="banner_lun_bo_a">
         <img src="imgs/banner_lun_bo_1.jpg" id="banner_lun_bo_img"/>
    </a>
   <h1 id="banner_lun_bo_img_desc">大象守护者项目带孩子们走进动物园</h1>
   <div style="position:absolute; right: 5px; bottom:0px;color:#FFF;">
      <ul class="banner_lun_bo_img_ul">
         <li>
            <a href="javascript:;" id="banner_lun_bo_a_1" οnclick="setLunBoImage(0)">1</a>
         </li>
         <li id="banner_lun_bo_li_2">
            <a href="javascript:;" id="banner_lun_bo_a_2" οnclick="setLunBoImage(1)">2</a>
         </li>
         <li id="banner_lun_bo_li_3">
            <a href="javascript:;" id="banner_lun_bo_a_3" οnclick="setLunBoImage(2)">3</a>
         </li>
      </ul>
   </div>
</div>
   
    



</body>

<script type="text/javascript" language="javascript">

// 图片轮播代码 start
var lun_bo_imgs = new Array();
lun_bo_imgs[0] = {img: "imgs/banner_lun_bo_1.jpg", a: "banner_lun_bo_a_1", desc: "大象守护者项目带孩子们走进动物园"};
lun_bo_imgs[1] = {img: "imgs/banner_lun_bo_2.jpg", a: "banner_lun_bo_a_2", desc: "古道尔博士在2010年根与芽中国峰会上与学生们在一起"};
lun_bo_imgs[2] = {img: "imgs/banner_lun_bo_3.jpg", a: "banner_lun_bo_a_3", desc: "水地图小组植物调查"};

var lun_bo_img_index = 0;
function lunBoImgage(){
   if(lun_bo_img_index >= lun_bo_imgs.length) lun_bo_img_index = 0;
   setLunBoImage(lun_bo_img_index);
   lun_bo_img_index += 1;
}


function setLunBoImage(index)
{
   if(index < 0 || index >= lun_bo_imgs.length) index = 0;
   var tagImg = document.getElementById("banner_lun_bo_img");
   tagImg.src = lun_bo_imgs[index].img;
   tagImg.title = lun_bo_imgs[index].desc;
   tagImg.alt = lun_bo_imgs[index].desc;
   document.getElementById("banner_lun_bo_img_desc").innerHTML = lun_bo_imgs[index].desc;
   document.getElementById(lun_bo_imgs[index].a).style.backgroundColor = "#003300";
   document.getElementById(lun_bo_imgs[index].a).style.color = "white";
   for(var i = 0; i < lun_bo_imgs.length; i++)
   {
         if(index != i)
         {
            document.getElementById(lun_bo_imgs[i].a).style.backgroundColor = "white";
            document.getElementById(lun_bo_imgs[i].a).style.color = "black";
         }
   }
}

 var timerLunBo = setInterval(lunBoImgage, 2000); 
 var banner_lun_bo_img_box = document.getElementById("banner_lun_bo_img_box");
 banner_lun_bo_img_box.onmouseover = function () { clearInterval(timerLunBo) };     
 banner_lun_bo_img_box.onmouseout = function ()  { timerLunBo = setInterval(lunBoImgage, 2000) };
 
// 图片轮播代码 end //



</script>

</html>