Maison > Article > interface Web > JS 相册效果自动播放[本地整合]_图象特效

JS 相册效果自动播放[本地整合]_图象特效

WBOYoriginal: 2016-05-16 18:57:351483parcourir

</div> 
</center>

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

可控制渐隐渐现：

<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"><img  src="http://img.jb51.net/online/slide/jb51.gif" id="photo"  alt="JS 相册效果 自动播放[本地整合]_图象特效" ></div> 
 
 
<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需刷新才能执行]

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧Article suivant：javascript radio list的实现细节(多浏览器兼容)_表单特效

Articles Liés

Voir plus

JS 相册效果 自动播放[本地整合]_图象特效

Articles Liés

JS 相册效果自动播放[本地整合]_图象特效