JS图片自动替换效果实现
日期：2014-05-16 浏览次数：20439 次
JS图片自动轮换效果实现
五一快到了，俺就特想玩了。好了，天色已晚，闲话不多说，看下用javaScript
实现的图片自动轮换效果，先看图片
下面是具体的代码，还是比较简单的。
<!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，睡觉。
- 2楼wf_kingofring13分钟前
- 不在状态， 我也想玩。收藏啦 楼主，基础知识 都忘记了。
- 1楼syjgreen072小时前
- 嗯，加油，这可是基础中的基础！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
