今天不在状态，
五一快到了，俺就特想玩了。好了，天色已晚，闲话不多说，看下用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图片切换轮换效果swf版"是一个专为网页设计打造的JavaScript组件，它能够实现多张图片在页面上自动循环播放的效果，为浏览者带来视觉上的动态体验。这种效果在网站的首页、产品展示或滑块部分尤为常见。 ...
本教程将深入探讨如何使用jQuery实现各种图片自动轮换效果。 一、基本概念 1. jQuery：jQuery是由John Resig创建的一个JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。其语法简洁，使得开发者能...
JS实现图片自动轮换效果，是指通过JavaScript脚本来控制网页上的图片按照一定的时间间隔依次更换显示，通常这种效果用来在网页上做广告展示、产品展示或者图片展示等。实现图片轮换的基本原理是利用JavaScript的...
总结，JS图片流动和轮换效果是提升网页动态感的关键，它们可以通过JavaScript的DOM操作、定时器和事件监听等功能轻松实现。在实际应用中，开发者可以根据需求选择合适的轮换方式和动画效果，以达到最佳的视觉体验。...
在JavaScript（简称js）中实现图片轮换效果是一项常见的网页动态功能，它可以为网站增加视觉吸引力，提升用户体验。本文将详细讲解如何利用JavaScript实现图片轮换，并探讨相关的技术要点。 首先，我们需要理解基本...
【纯js的图片轮换效果】是一种常见的网页动态展示技术，尤其在制作广告展示、轮播图或产品展示等场景中应用广泛。这种效果通过JavaScript编程实现，无需依赖额外的库如jQuery，使得代码更加轻量级，加载速度更快，...
【JavaScript + CSS 实现图片轮换效果】 在网页设计中，动态展示图片是常见的需求，而使用JavaScript和CSS实现图片轮换效果可以增加网站的视觉吸引力。以下将详细讲解如何利用这两种技术创建一个图片轮换功能。 ...
JavaScript图片轮换效果是一种常见的网页动态展示技术，用于在页面上自动切换一组图片，以吸引用户的注意力或展示多个相关的图像。这种效果可以增加网站的视觉吸引力，并为用户提供更丰富的交互体验。下面我们将深入...
`setInterval`函数每隔指定的`rotateInterval`（3000毫秒，即3秒）调用`rotateImages`，实现自动轮换。 为了增强用户体验，还可以添加过渡效果。可以使用CSS的`transition`属性实现平滑的过渡动画： ```css /* ...
在本场景中，"js图片轮换效果"指的是使用JavaScript技术来实现图片在网页上的自动切换，以达到展示多张图片或增加视觉吸引力的目的。这种效果在网站设计中十分常见，比如广告轮播、幻灯片展示等。 图片轮换效果的...
在这个压缩包中，包含两种版本的图片轮换广告实现：JS版和SWF版，以及它们的调用示例。 **JS版图片轮换广告** JavaScript（JS）是一种轻量级的脚本语言，常用于网页的动态效果和交互。JS版的图片轮换广告通常基于...
5. **定时器**：`setInterval()`或`setTimeout()`用于设置定时执行某些操作，实现图片自动轮换。 6. **回调函数**：确保动画完成后再执行其他代码，如`fadeOut()`的回调函数内进行图片替换。 7. **数组和索引**：...
4. **定时器**：为了实现自动轮换，可以使用JavaScript的`setInterval()`函数，每隔一定时间（如3秒）自动触发轮换。 5. **控制按钮**：如果需要手动切换，还需要添加前进和后退按钮，通过jQuery绑定点击事件来切换...
"很好的图片轮换效果有JS" 这个标题表明我们将探讨的是使用JavaScript实现的图片轮换特效。JavaScript是一种广泛使用的客户端脚本语言，它能够使网页具有交互性，而图片轮换正是这种交互性的体现。 图片轮换效果...
实现图片轮换效果的基本步骤如下： 1. **HTML结构**：首先，我们需要在HTML中设置一个容器，用于存放所有要轮换的图片。这些图片可以是`<img>`标签，也可以是CSS背景图像。 2. **CSS样式**：虽然这个插件没有附加...
"原创 jQuery 图片轮换效果"是利用JavaScript库jQuery实现的一种高效、灵活的图片切换功能。接下来，我们将深入探讨这一技术的实现原理和关键代码。 1. **jQuery基础知识**： jQuery 是一个轻量级的JavaScript库，...
8. **图片轮换插件**：除了自定义代码实现，还可以利用现有的JavaScript图片轮换插件，如Slick、FlexSlider、bxSlider等。这些插件提供了丰富的配置选项和预设效果，能快速实现高质量的图片轮换功能。 9. **响应式...