码迷,mamicode.com
首页 > Web开发 > 详细

JS图片自动轮换效果实现

时间:2014-04-30 22:24:38      阅读:358      评论:0      收藏:0      [点我收藏+]

标签:javascript   体验   轮换   

mamicode.com,码迷今天不在状态,mamicode.com,码迷五一快到了,俺就特想玩了。好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片mamicode.com,码迷

mamicode.com,码迷

下面是具体的代码,还是比较简单的。mamicode.com,码迷

<!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">
.content{
	border:3px solid red;
	padding:3px;
	width:500px;
	height:245px;
	position:relative;
}
.content img{
	border:0;
	
}
.content div{
	position:absolute;
	z-index:1000;
	border:2px solid green;
	padding:3px 5px;
	background:#ccc;
}
.content .cur{background:red;color:white;}//当前显示的图片的小方块,红色背景白色字体
</style>
<script type="text/javascript">
var arr=[‘images/1.jpg‘,‘images/2.jpg‘,‘images/3.jpg‘,‘images/4.gif‘,‘images/5.jpg‘];
var i=0;
var ob,obk;
function lunhuan(){
	
	if(i>4){//数字大于4就从0开始
		i=0;
	}
	ob=document.getElementById("image1");
	ob.src=arr[i];
	//所有div-0到div-4,背景颜色置灰
	for(var j=0;j<=4;j++){
		document.getElementById("div-"+j).style.backgroundColor=‘#ccc‘;
		document.getElementById("div-"+j).style.color=‘black‘;
	}
	obk=document.getElementById("div-"+i);
	obk.style.backgroundColor=‘red‘;
	obk.style.color=‘white‘;
	i++;
}
</script>
</head>
<body onload="window.setInterval(lunhuan,1000);">
<div class="content">
	<img id="image1" src="images/1.jpg"/>
	<div class="cur" id="div-0" style="top:215px;right:128px;">1</div>
	<div id="div-1" style="top:215px;right:98px;">2</div>
	<div id="div-2" style="top:215px;right:68px;">3</div>
	<div id="div-3" style="top:215px;right:38px;">4</div>
	<div id="div-4" style="top:215px;right:8px;">5</div>
</div>
<input type="button" value="test" onclick="lunhuan();"/>
</body>
</html>
简单的说下流程:

1.先定义最外层的DIV

2.再定义紧挨着的图片DIV

3.图片右下角的小方块DIV

用计时器函数,实现图片轮换,并让小方块也产生对于的变化。

OK,睡觉。


JS图片自动轮换效果实现

标签:javascript   体验   轮换   

原文地址:http://blog.csdn.net/php5921/article/details/24746245

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!