今天不在状态，五一快到了，俺就特想玩了。好了，天色已晚，闲话不多说，看下用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图片自己主动轮换效果实现的更多相关文章

  1. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  3. js 图片跟随鼠标移动效果 案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  5. 仿FLASH的图片轮换效果

    css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...

  6. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  7. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  8. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  9. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

随机推荐

  1. Struts 2 Overview

    Struts2 is popular and mature web application framework based on the MVC design pattern. Struts2 is ...

  2. 从字节码角度分析Byte类型变量b++和++b

    1. 下面是一到Java笔试题: public class Test2 { public void add(Byte b) { b = b++; } public void test() { Byte ...

  3. Java第三阶段学习（四、缓冲流）

    一.缓冲流: Java中提供了一套缓冲流,它的存在,可提高IO流的读写速度 缓冲流,根据流的分类分为:字节缓冲流与字符缓冲流. 二.字节缓冲流: 字节缓冲流根据流的方向,共有2个: 1.写入数据到流中 ...

  4. 关键字final和override

    final关键字 限制某个类或结构体不能被继承 直接对类声明: class A final{}; class B : public A {}; 或这类内有final函数,类可以被继承,但是final函 ...

  5. ASP.NET：Forms身份验证和基于Role的权限验证

    从Membership到SimpleMembership再到ASP.NET Identity,ASP.NET每一次更换身份验证的组件,都让我更失望.Membership的唯一作用就是你可以参考它的实现 ...

  6. Bubbo的启动时检查

    这个地方参考dubbo的官网,不是很难,为了使得文档的完整,也单独起一章. 1.默认 Dubbo 缺省会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止 Spring 初始化完成,以便上线时, ...

  7. 《Android源码设计模式》--状态模式--责任链模式--解释器模式--命令模式--观察者模式--备忘录模式--迭代器模式

    [状态模式] No1: Wifi设置界面是一个叫做WifiSetting的Fragment实现的 No2: 在不同的状态下对于扫描Wifi这个请求的处理是完全不一样的.在初始状态下扫描请求被直接忽略, ...

  8. 《Android源码设计模式》--Builder模式

    No1: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示 No2: 在Android源码中,最常用到的Builder模式就是AlertDialog.Builder No3: ...

  9. leetcode easy problem set

     *勿以浮沙筑高台* 持续更新........     题目网址:https://leetcode.com/problemset/all/?difficulty=Easy 1. Two Sum [4m ...

  10. Windows Server 2008 R2下将JBoss安装成windows系统服务

    JBoss版本是jboss-4.2.3.GA-jdk6.zip,操作系统是Windows Server 2008 R2. 1.系统已安装好java环境,JAVA_HOME已配置好: 2.下载所需文件. ...