今天不在状态，
五一快到了，俺就特想玩了。好了，天色已晚，闲话不多说，看下用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，睡觉。
分享到：
相关推荐
主要介绍了JS实现的图片自动轮换效果，有具体的实现思路及截图，希望对大家学习有所帮助
网页首页必备的图片轮换效果 和图片自动流动的效果！！ 网页首页必备的图片轮换效果 和图片自动流动的效果！！
jquery后台登录页面背景图片自动轮换登录界面代码，用jquery来验证表单，背景图片自动轮换这样的一个炫酷的效果，登录页面一般用于网站后台，登录成功进入管理系统，在商城的前端也会用到例如会员的登录。...
使用方法这里就不再赘述，毕竟网页中配备好多效果，且每个效果均有js解释说明 特点： 1、响应式——可调节效果至任意宽度大小 2、支持图文混合内容显示 3、无需css 4、轻量级（<8kb的插件） ...
图片特效浏览，默认自动循环，可暂停，点击下一张图片或者下一张按钮可快速切换到下一张 双击图片看大图 单击图片打开链接 ...本实例只是提供一个js代替flash做同样效果的思路，代码可以在indexScript.js找到
通过javascript，css等来实现图面在jsp或者html中能够像旋转木马一样进行滚动的效果
tab标签切换代码，切换内容为分辨率较大的图片，js代码会自动调用图片滑动，达到小窗口大视野的效果。相关链接：js实现自适应宽度的tab标签导航。懒人之家推荐下载
109:四屏切换JS广告代码下载 110：JavaScript图片切换效果 下载 111:在线客服代码 下载 112：单独关闭的两边悬挂代码下载 113:全屏可伸缩可关闭广告代码下载 114：四屏JS带缩略图的焦点图 下载 115:书角带阴影的...
本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下 需求： 自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图 效果图： ![轮播图] 思路： 将所有需要轮播的图片横向排列，...
1、图片自动依次轮换，每轮换到一张图片，下面对应的小图标出现红色边框，并显示对应的图片名称 2、鼠标放到大图片上面的时，图片停止轮换，一直显示当前图片；鼠标移开后图片继续轮换 3、鼠标移到小图标上时...
109:四屏切换JS广告代码下载 110：JavaScript图片切换效果 下载 111:在线客服代码 下载 112：单独关闭的两边悬挂代码下载 113:全屏可伸缩可关闭广告代码下载 114：四屏JS带缩略图的焦点图 下载 115:书角带阴影的...
JS 特效 选项卡 菜单 下拉菜单 滚动特效 相册特效等等 网页特效 素材 web div+css 3级横向导航菜单 163网盘折叠菜单 CSS下拉菜单 div显示隐藏效果 Javascrip实现相册缩略图导航的两种效果 JS 图片轮换 封装中处理...
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署即可! 服务器自定义开发二之客户端脚本回发 Web开发: 使用URL重写WEB主题切换 如何在Asp.Net1.1中实现页面模板(所谓的...