JavaScript——自动播放幻灯片效果
参考作者Ferris个人网站 ，经过自己修改。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<title>自动播放——幻灯片效果</title>
</head>
<style>
*{
margin:0;
padding:0;
}
body{
background:black;
text-align:center;
font:12px/20px Arial;
}
ul{
list-style-type:none;
}
#box{
position:relative;
width:710px;
height:470px;
background:#000;
border-radius:5px;
border:8px solid #000;
margin:10px auto;
margin-top:150px;
}
#box .list{
position:relative;
width:710px;
height:470px;
overflow:hidden;
//border:1px solid #ccc;
}
#box .list li{
position:absolute;
top:0;
left:0;
width:710px;
height:450px;
opacity:0;
filter:alpha(opacity=0);
}
#box .list li.current{
opacity:1;
filter:alpha(opacity=100);
}
#box .count{
position:absolute;
right:0;
bottom:5px;
}
#box .count li{
color:#224b8f;
float:left;
width:20px;
height:20px;
cursor:pointer;
margin-right:8px;
overflow:hidden;
background:#afb4db;
opacity:0.7;
filter:alpha(opacity=70);
border:1px solid #78a355;
border-radius:10px;
font-size:15px;
}
#box .count li.current{
opacity:1;
filter:alpha(opacity=100);
font-weight:700;
background:#afb4db;
}
</style>
<script>
window.onload = function(){
var oBox= document.getElementById("box");
var aUl = document.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);
}
}
//鼠标划过关闭定时器
oBox.onmouseover = function(){
clearInterval(play);
}
//自动播放函数
function autoPlay(){
play = setInterval(function(){
index++;
index >= aImg.length && (index = 0);
show(index);
},3000);
}
autoPlay();
//鼠标离开box时自动播放
oBox.onmouseout = function(){
autoPlay();
}
function show(a){
if(aNum[a].className != "current"){
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 +=4;
alpha>100 && (alpha=100);
aImg[index].style.opacity=alpha/100;
aImg[index].style.filter = "alpha(opacity="+alpha+")";
alpha == 100 && clearInterval(timer);
},20);
}
}
};
</script>
<body>
<div id="box">
<ul class="list">
<li class="current" ><img src="data:images/星空.jpg" width="710" height="470"/></li>
<li><img src="data:images/雪.jpg" width="710" height="470"/></li>
<li><img src="data:images/草原.jpg" width="710" height="470"/></li>
<li><img src="data:images/13.jpg" width="710" height="470"/></li>
<li><img src="data:images/黑白.jpg" width="710" height="470"/></li>
</ul>
<ul class="count">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
JavaScript——自动播放幻灯片效果相关推荐
- php实现自动播放ppt,JavaScript_jquery实现简单的自动播放幻灯片效果，本文实例讲述了jquery实现简单 - phpStudy...
jquery实现简单的自动播放幻灯片效果 本文实例讲述了jquery实现简单的自动播放幻灯片效果.分享给大家供大家参考.具体实现方法如下: html部分: Pretty cool eh? This s ...
- 12_微信小程序之微信视频号滚动自动播放视频效果实现
12_微信小程序之微信视频号滚动自动播放视频效果实现 一.获取视频的分辨率.时长.缩略图 微信小程序提供了三种方式可以获取视频的分辨率.时长: wx.getVideoInfo(Object) :只能用 ...
- win10壁纸不能幻灯片放映_win10系统桌面无法自动播放幻灯片的具体技巧
win10系统使用久了,好多网友反馈说win10系统桌面无法自动播放幻灯片的问题,非常不方便.有什么办法可以永久解决win10系统桌面无法自动播放幻灯片的问题,面对win10系统桌面无法自动播放幻灯片 ...
- web前端 运用CSS动画 实现图像的幻灯片 自动播放 切换效果
先看一下浏览器运行结果: 一. 最初用"background-image"背景图片属性定义动画,结果幻灯片切换时没有上下滑动的效果. 仅用到HTML和CSS,未用javascrip ...
- android 自动播放 幻灯片,Android自动播放Banner图片轮播效果
本文实例为大家分享了Android自动播放Banner图片轮播的具体代码,供大家参考,具体内容如下 先看一下效果图 支持本地图片以及网络图片or本地网络混合. 使用方式: android:id=&qu ...
- 《javaScript100例|04》自动播放——Js幻灯片缓冲效果
目录 效果图 示例 源码地址: 效果图 示例 <html> <head> <title>自动播放--幻灯片缓冲效果</title> <style& ...
- 微信中音乐播放在ios不能自动播放解决
在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐var x = document.getElementById("myAudio ...
- 计算机桌面打开图像管理,如何给电脑桌面设置几张图片自动播放
如何给电脑桌面设置几张图片自动播放 我们在使用电脑的时候,想要给桌面背景设置成几张照片自动播放的效果,该怎么操作呢?今天就跟大家介绍一下如何给电脑桌面背景设置几张图片自动播放的具体操作步骤. 1. 首 ...
- 手机端网页自动播放背景音乐相关资料
做手机端活动页面的时候,经常会遇到打开页面自动播放背景音乐的需求.但是很多开发人员在实现这个需求时会遇到各种各样不能自动播放或有些场景可以有些场景不行的现象,现在总结一下手机端自动播放背景音乐的资料. ...
最新文章
- 用Spark和DBSCAN对地理定位数据进行聚类
- webpack对icon-font图片的处理
- python学习之路-继承
- 山东理工OJ【2121】数据结构实验之链表六：有序链表的建立(插排法)
- linux挂载多个目录下,linux – 如何在centos上使用nfs4挂载多个文件夹？
- vs 2019 社区版许可证过期_Switch版《最终幻想12：黄道时代》对比PS4版 就没差
- recover 没有捕获异常_defer + recover 捕获所有异常
- 使用 position: sticky 达到粘性元素区域悬浮效果
- HTML和CSS 基本要点必看
- 多线程实战(一) : 交通灯管理系统
- c++中static关键字的用法总结
- 将计算机屏幕,iPad化身显示器！一款能让平板变电脑屏幕的神器
- 关于360插件化框架Replugin竖屏修改为横屏解决方案
- ATM(异步传输模式)是什么？
- id nfc模拟_NFC手机伪造门禁卡和模拟门禁卡教程
- hololens凝视物体、单击双击、语音控制、蓝牙
- 网易云音乐评论 可视化分析
- Internet 协议与分析——期末复习总结
- python自制小游戏_教你用Python自制拼图小游戏，一起来制作吧
- cgal配置以及一些资料