JS 相册效果自动播放[本地整合]

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

可控制渐隐渐现：

<html> 
<body> 
<div id="testMessage" style="border:2px solid skyblue;width:300px;height:60px"></div> 
<div id="photoContrl" style="display:none"> 
<button onclick="prevPhoto()">Previous</button> 
<button onclick="nextPhoto()">Next</button> 
<button onclick="autoPlay()" id="pp">Play</button> 
<button onclick="stopPlay()">Stop</button> 
</div> 
<div style="border:1px solid gold;width:600px;background:dodgerblue"></div> 
</body> 
</html> 
<script>

//幻灯片效果 
var photoIndex=0//初始化图片索引 
var opacity=10//初始化透明度 
var direct="--"//初始化透明度矢量 
var doPlay//定义播放 
var doAutoPlay//定义自动播放 
function prevPhoto(){play(-1)}//前翻 
function nextPhoto(){play(1)}//后翻 
function autoPlay()//自动播放 
{ 
if (doAutoPlay) 
{ 
clearInterval(doAutoPlay) 
doAutoPlay=null 
$("pp").innerHTML="Play" 
} 
else 
{ 
play(1) 
doAutoPlay=setInterval("play(1)",3000)//定义自动播放频率 
$("pp").innerHTML="Pause" 
} 
} 
function stopPlay()//停止播放 
{ 
clearInterval(doAutoPlay) 
doAutoPlay=null 
photoIndex=0 
play(0) 
$("pp").innerHTML="Play" 
} 
function play(act)//执行动作 
{ 
if (preIma.length!=0) 
{ 
if (doPlay) {clearInterval(doPlay)} 
doPlay=setInterval(switchPhoto,10) 
photoIndex=(photoIndex+act+preIma.length)%preIma.length 
} 
} 
function switchPhoto()//切换照片 
{ 
eval("opacity"+direct) 
setOpa(opacity) 
if (opacity <= 1) 
{ 
direct="++" 
$("photo").src=preIma[photoIndex].src 
} 
else if (opacity >= 10) 
{ 
direct="--" 
clearInterval(doPlay) 
} 
} 
function setOpa(opacity)//改变透明度 
{ 
if ($("photo").style.filter!=null) 
{$("photo").style.filter="alpha(opacity="+opacity*10+")"} 
else 
{$("photo").style.opacity=opacity/10} 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类

JS 相册效果 自动播放[本地整合]

JS 相册效果自动播放[本地整合]