JS图片自己主动轮换效果实现
今天不在状态,
五一快到了,俺就特想玩了。好了,天色已晚,闲话不多说,看下用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图片自己主动轮换效果实现的更多相关文章
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JS框架_(JQuery.js)图片相册掀开切换效果
百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- js 图片跟随鼠标移动效果 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery实现图片轮换效果
最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...
- 仿FLASH的图片轮换效果
css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...
- jQuery仿迅雷图片轮换效果
jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
随机推荐
- [Torch]的安装
1 安装Torch 本文介绍Torch7的安装方法,因为本人安装Torch前安装了caffe,所以可能CUDA.cudnn.Blas等Torch可能需要用来的库的安装就不再重复介绍了,相关依赖出现问题 ...
- CSS常见简写规则整理
外边距(margin) margin-top margin-right margin-bottom margin-left 简写顺序为顺时针方向(上.右.下.左),如:margin: 1px 2px ...
- Django数据库数据表操作
建立表单 django通过设置类来快速建表,打开models.py 例: from __future__ import unicode_literals from django.db import m ...
- Ubuntu下编译安装OpenCV 2.4.7并读取摄像头
主要参考: 1.http://www.ozbotz.org/opencv-installation/ 2.http://www.ozbotz.org/opencv-install-troublesho ...
- easyUI小技巧-纯干货
一.显示分页(pagination:true)情况下,隐藏每页显示的记录条数的那个select(即pageList),下图箭头 方法1:onBeforeLoad:function(param){ ...
- HDU - 4465 期望 + 取log优化
思路:这个求期望的公式很容易得到,但是在算的时候我们会遇到一个问题,就是组合数太大了根本存不下, 这时候就可以在计算的时候都取log,最后复原... 以前没遇到过.. #include<bit ...
- C#实例 Unity依赖注入使用
Unity是一个轻量级的可扩展的依赖注入容器,支持构造函数,属性和方法调用注入.Unity可以处理那些从事基于组件的软件工程的开发人员所面对的问 题.构建一个成功应用程序的关键是实现非常松散的耦合设计 ...
- Mybatis 源码分析之事物管理
Mybatis 提供了事物的顶层接口: public interface Transaction { /** * Retrieve inner database connection * @retur ...
- maven的统一版本管理实践
为什么要使用maven的统一版本管理? 在进行项目开发的时候,我们使用maven来做项目的构建和管理.为了方便项目中各个模块之间的复用,项目通常会有多个模块构成.不同的模块,会各自应用自己需要的jar ...
- python 乘法表、打印菱形
for i in range(1,10): print ' '.join(map(lambda x:"%d x %d = %d"%(x,i,i*x),range(1,i+1))) ...