javascript - 图片的幻灯片效果
javascript 代码:
<script type="text/javascript">
function select_play() {
var select_play_box = document.getElementById("select_play_box");
var aUl = select_play_box.getElementsByTagName("ul");
var aImg = aUl[0].getElementsByTagName("li");
var aNum = aUl[1].getElementsByTagName("li");
var timer = play = null;
var i = index = 0;
//切换按钮
for (i = 0; i < aNum.length; i++) {
aNum[i].index = i;
aNum[i].onmouseover = function () {
show(this.index)
}
}
//鼠标划过关闭定时器
select_play_box.onmouseover = function () {
clearInterval(play)
}; //鼠标离开启动自动播放
select_play_box.onmouseout = function () {
autoPlay()
}; //自动播放函数
function autoPlay() {
play = setInterval(function () {
index++;
index >= aImg.length && (index = 0);
show(index);
}, 2500);
} autoPlay();//应用
//图片切换, 淡入淡出效果
function show(a) {
index = a;
var alpha = 0;
for (i = 0; i < aNum.length; i++)aNum[i].className = "";
aNum[index].className = "current";
clearInterval(timer); for (i = 0; i < aImg.length; i++) {
aImg[i].style.opacity = 0;
aImg[i].style.filter = "alpha(opacity=0)";
} timer = setInterval(function () {
alpha += 2;
alpha > 100 && (alpha = 100);
aImg[index].style.opacity = alpha / 100;
aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
alpha == 100 && clearInterval(timer)
}, 20);
}
}
</script>
html代码:
<div id="select_play_box">
<ul class="select_play_list">
<li class="select_play_current"><img src="d/a.jpg"/></li>
<li><img src="d/b.jpg"/></li>
<li><img src="d/c.jpg"/></li>
<li><img src="d/d.jpg"/></li>
</ul>
<ul class="select_play_count">
<li class="select_play_current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
css代码:
#select_play_box {
position: relative;
width: 315px;
height: 272px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 5px auto;
}
#select_play_box ul {
list-style-type: none;
}
#select_play_box ul, li {
margin:;
padding:;
}
#select_play_box .select_play_list {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid #ccc;
}
#select_play_box .select_play_list li {
position: absolute;
top:;
margin-left: 15px;
margin-top: 5px;
width: 300px;
height: 170px;
opacity:;
filter: alpha(opacity=0);
}
#select_play_box .select_play_list img {
width:250px;
height: 250px;
}
#select_play_box .select_play_list li.select_play_current {
opacity:;
filter: alpha(opacity=100);
}
#select_play_box .select_play_count {
position: absolute;
right:;
bottom: 5px;
}
#select_play_box .select_play_count li {
text-align: center;
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.7;
filter: alpha(opacity=70);
border-radius: 20px;
}
#select_play_box .select_play_count li.select_play_current {
color: #fff;
opacity:;
filter: alpha(opacity=100);
font-weight:;
background: #f60;
}
完整html页面代码:
<!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>javascript - 图片的幻灯片效果</title>
<link type="text/css" href="sy/select_auto_image.css" rel="stylesheet"/>
</head>
<body onload="select_play()">
<div id="select_play_box">
<ul class="select_play_list">
<li class="select_play_current"><img src="d/a.jpg"/></li>
<li><img src="d/b.jpg"/></li>
<li><img src="d/c.jpg"/></li>
<li><img src="d/d.jpg"/></li>
</ul>
<ul class="select_play_count">
<li class="select_play_current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript">
function select_play() {
var select_play_box = document.getElementById("select_play_box");
var aUl = select_play_box.getElementsByTagName("ul");
var aImg = aUl[0].getElementsByTagName("li");
var aNum = aUl[1].getElementsByTagName("li");
var timer = play = null;
var i = index = 0;
//切换按钮
for (i = 0; i < aNum.length; i++) {
aNum[i].index = i;
aNum[i].onmouseover = function () {
show(this.index)
}
}
//鼠标划过关闭定时器
select_play_box.onmouseover = function () {
clearInterval(play)
}; //鼠标离开启动自动播放
select_play_box.onmouseout = function () {
autoPlay()
}; //自动播放函数
function autoPlay() {
play = setInterval(function () {
index++;
index >= aImg.length && (index = 0);
show(index);
}, 2500);
} autoPlay();//应用
//图片切换, 淡入淡出效果
function show(a) {
index = a;
var alpha = 0;
for (i = 0; i < aNum.length; i++)aNum[i].className = "";
aNum[index].className = "current";
clearInterval(timer); for (i = 0; i < aImg.length; i++) {
aImg[i].style.opacity = 0;
aImg[i].style.filter = "alpha(opacity=0)";
} timer = setInterval(function () {
alpha += 2;
alpha > 100 && (alpha = 100);
aImg[index].style.opacity = alpha / 100;
aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
alpha == 100 && clearInterval(timer)
}, 20);
}
}
</script>
</body>
</html>
javascript - 图片的幻灯片效果的更多相关文章
- 《JavaScript 实战》：JavaScript 图片滑动切换效果
看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...
- javascript 图片淡入淡出效果 实例源代码
代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...
- javascript图片切换
JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- JavaScript函数实现鼠标指向后带图片的提示效果
转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从 ...
- 原生 JavaScript 图片裁剪效果
图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...
随机推荐
- ☀【移动】Google Maps JavaScript API v3
Google Maps JavaScript API v3https://developers.google.com/maps/documentation/javascript/tutorial?hl ...
- 转载--C++中struct与class
转自:http://www.cnblogs.com/york-hust/archive/2012/05/29/2524658.html 1. C++中的struct对C中的struct进行了扩充,它已 ...
- 安装windows系统（win7）
又到了清理电脑,重装系统的时候了.最近被自己电脑折腾得不清,特记录下安装心得,以方便以后. 分区考虑(35G+40G) 35G=16G+4G+5G+10G,其中16G是64位官方旗舰版WIN7刚安装好 ...
- 网络基础（一）ARP！！！
ARP,Address Resolution Protocol,地址解析协议,用于IP到MAC地址的映射(知道ip得到mac),实现数据的封装过程.ARP是在Ethernet以上,所以是属于网络层 ...
- UILable自适应frame
UILabel *textlab = [[UILabel alloc]initWithFrame:CGRectMake(20, 10,ScrollView.frame.size.width - 40, ...
- Yslow 之 高性能网站建设指南（High.Performance.Web.Sites）
一个朋友做了2年前端重构,不知道 YSLOW.我推荐给他的时候,他惊呼这工具很强大. YSLOW 只是 Yahoo 前端发布的一个评测网站前端质量的插件.它的原理是基于 Yahoo 前端工程师提出来的 ...
- mysql数据库引擎问题汇总
可以使用mysql> show engines;查看mysql支持何种引擎, 其中default表明该引擎为默认引擎. 在windows下面的mysql引擎默认为InnoDB,linux下的为 ...
- (转)在Mac下使用OpenCV， 在Xcode下使用OpenCV (非常基础，详细)
转自:http://blog.sciencenet.cn/home.php?COLLCC=3456986939&COLLCC=3456885714&mod=space&uid= ...
- HttpURLConnection的流式输出的缺陷和解决方法
转自:http://www.mzone.cc/article/198.html 最近在用applet写文件上传控件的时候发现使用URLConnection来对服务器进行流式输出时的一些问题.我们通常要 ...
- java 反射(reflect)总结，附对象打印工具类
java反射机制认知 java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取类的信息以及动态调用对象的方法的 ...