JS图片自动轮换效果实现思路附截图


Posted in Javascript onApril 30, 2014

今天不在状态,安静五一快到了,俺就特想玩了。好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片
JS图片自动轮换效果实现思路附截图 
下面是具体的代码,还是比较简单的。

<!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,睡觉。

Javascript 相关文章推荐
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
JavaScript 事件系统
Jul 22 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 #Javascript
jquery实现更改表格行顺序示例
Apr 30 #Javascript
使用原生js写的一个简单slider
Apr 29 #Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 #Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 #Javascript
百度移动版的url编码解码示例
Apr 29 #Javascript
通过url查找a元素应用案例
Apr 29 #Javascript
You might like
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
js 数组操作代码集锦
2009/04/28 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
js自定义回调函数
2015/12/13 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
python验证码识别的示例代码
2017/09/21 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python实现飞行棋游戏
2020/02/05 Python
python能做哪些生活有趣的事情
2020/09/09 Python
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
财务副总经理工作职责
2013/11/25 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
单位婚育证明范本
2014/11/21 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers