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 相关文章推荐
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
javascript实现留言板功能
Feb 08 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
vue实现div单选多选功能
Jul 16 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
PHP Stream_*系列函数
2010/08/01 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python微信库:itchat的用法详解
2017/08/14 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
简单了解python PEP的一些知识
2019/07/13 Python
python global关键字的用法详解
2019/09/05 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
同学聚会主持词
2014/03/18 职场文书
管理标语大全
2014/06/24 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP