今天不在状态，五一快到了，俺就特想玩了。好了，天色已晚，闲话不多说，看下用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. 一步一步学习IdentityServer3 (12) 授权模式

    Idr3中的授权模式也是基于OAuth2 来看看例子中的说明 // // 摘要: // OpenID Connect flows. public enum Flows { // // 摘要: // a ...

  2. maven:missing artifact jdk.tools:jar:1.7

    http://stackoverflow.com/questions/11118070/buiding-hadoop-with-eclipse-maven-missing-artifact-jdk-t ...

  3. java 基础类库之 FormatFun

    package com.exjor.webdemo; import java.text.SimpleDateFormat; import java.util.Date; public class Fo ...

  4. Web Api之Cors跨域以及其他跨域方式（三）

    我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还有另外实现跨域方式 一.手动实现JSONP跨域 1.首先 ...

  5. php输出多余的空格或者空行

    1,文件是否有bom.可以通过脚步检测,或者利用notepa++打开,查看编码格式. 2.  <?php echo 'something'; ?>  或许是你的php标签外,有空格或者空行 ...

  6. 8-15 Shuffle uva12174

    题意: 你正在使用的音乐播放器有一个所谓的乱序功能,即随机打乱歌曲的播放顺序.假设一共有s首歌,则一开始会给这s首歌随机排序,全部播放完毕后再重新随机排序.继续播放,依此类推.注意,当s首歌播放完毕之 ...

  7. 【解决】 64位笔记本丢失 MSVCR110.dll win10 phpstudy2017

    启动程序报错如下: 无法启动此程序,因为计算机中丢失MSVCR110.dll.尝试重新安装该程序以解决此问题. 应该很容易就搜索到,缺少这样的dll文件,是没有安装Visual C++ Redistr ...

  8. 微信JS-SDK之图像接口开发详解

    由于现在手头的项目中有一个上传证件照认证的功能(手机端),之前的思路是直接点击上传,然后直接将图片上传到服务器去,这篇文章有讲到(http://www.cnblogs.com/it-cen/p/453 ...

  9. 20169211《Linux内核原理与分析》课程总结

    第一周作业:linux入门学习:熟悉操作linux的基础命令 第二周作业:实验反汇编一个简答的C程序,学习汇编代码的工作过程 第三周作业:学习linux内核的启动过程 第四周作业:学习linux内核进 ...

  10. OpenGL笔记<第一章> 构建 GLSL class

    恭喜,我们终于很扎实地完成了第一章——glsl 入门 不幸的是,it's not the basic of GLSL shader ,我们下一节开篇,basic of GLSL shader 在下一章 ...