今天不在状态，五一快到了，俺就特想玩了。好了，天色已晚，闲话不多说，看下用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. PowerTool x64驱动模块逆向分析（持续更新）

    比赛打完了,来继续搞了,因为那个主动防御正在写,所以想找找思路正好想到可以来逆向一下PT的驱动模块看看pt大大是怎么写的程序. PT x64版本的驱动模块是这个kEvP64.sys. 0x0 先来看看 ...

  2. 学习python绘图

    学会python画图 # 使用清华的pip源进行安装sklearn # pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -U sciki ...

  3. Rewrite HTTP to HTTPS in Nginx

    1.推荐配置 server { listen 80; server_name example1.com example2.com; return 301 https://$host$request_u ...

  4. wordpress 常用函数-wpdb类

    与数据库建立接口 WordPress为用户提供了一系列用于数据库操作的函数类——wpdb.Wpdb类建立在Justin Vincent编写并维护的ezSQL类的基础上. 使用须知 不可直接调用wpdb ...

  5. 美团外卖商家获取订单-signToken取值

    需要抓取美团历史订单,请联系QQ:858-048-581所需工具: findller chrome 获取外卖历史订单地址为: http://e.waimai.meituan.com/v2/order/ ...

  6. apache camel 条件路由

    <camelContext xmlns="http://camel.apache.org/schema/blueprint"> <route id="e ...

  7. MySQL开发技巧

    MySQL基础表和数据 如何进行行列转换 行转列 场景:报表统计(sum()).汇总显示表数据:select * from score; 希望达到的效果 cross join SQL如下: selec ...

  8. day5模块学习 -- os模块学习

    python基础之模块之os模块 os模块 os模块的作用: os,语义为操作系统,所以肯定就是操作系统相关的功能了,可以处理文件和目录这些我们日常手动需要做的操作,就比如说:显示当前目录下所有文件/ ...

  9. 继承的基本概念： （1）Java不支持多继承，也就是说子类至多只能有一个父类。 （2）子类继承了其父类中不是私有的成员变量和成员方法，作为自己的成员变量和方法。 （3）子类中定义的成员变量和父类中定义的成员变量相同时，则父类中的成员变量不能被继承。 （4）子类中定义的成员方法，并且这个方法的名字返回类型，以及参数个数和类型与父类的某个成员方法完全相同，则父类的成员方法不能被继承。 分析以上程

    继承的基本概念: (1)Java不支持多继承,也就是说子类至多只能有一个父类. (2)子类继承了其父类中不是私有的成员变量和成员方法,作为自己的成员变量和方法.(3)子类中定义的成员变量和父类中定义的 ...

  10. 003 python流程控制与函数

    一:控制语句 1.条件语句 注意: if: elif: elif: else: 2.while循环 里面可以加else. # coding=utf-8 count=0 while count<3 ...