图片轮播切换效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/friendan/article/details/52702264

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

// 图片轮播代码 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>