一份简单的轮播图代码

来源：互联网发布：艾默生网络能源出售编辑：程序博客网时间：2024/05/17 03:32
<!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" onclick="setLunBoImage(0)">1</a></li><li id="banner_lun_bo_li_2"><a href="javascript:;" id="banner_lun_bo_a_2" onclick="setLunBoImage(1)">2</a></li><li id="banner_lun_bo_li_3"><a href="javascript:;" id="banner_lun_bo_a_3" onclick="setLunBoImage(2)">3</a></li></ul></div></div> </body><script type="text/javascript" language="javascript">// 图片轮播代码 startvar 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>
0 0