javascript 实现图片切换

最新推荐文章于 2020-05-13 12:41:25 发布

iteye_20975

最新推荐文章于 2020-05-13 12:41:25 发布

阅读量97

点赞数

文章标签： JavaScript Ajax HTML ViewUI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Show Pictures </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<center>
<h1>Ajax无刷新实现图片切换特效</h1>
<hr >
<br >
<h5>效果如下</h5>
<div class="mod" id="mod_album" xmlns="">
<center class="modhead">
<span class="phpage">
<a href="#" οnclick="previous();return false;"><img border="0" align="absmiddle" width="60" height="60" src="previous.png" title="lastone" alt="lastone"οnmοuseοver="" οnmοuseοut="" /> </a>
<a href="#" οnclick="PlayControl();return false;"><img border="0" align="absmiddle" width="60" height="60" src="pause.png" title="pause" οnmοuseοver="m_over(this)" οnmοuseοut="m_out(this)" id="playControlImg" /></a>
<a href="#" οnclick="next();return false;"><img border="0" align="absmiddle" width="60" height="60" src="next.png" title="nextone" alt="nextone"οnmοuseοver="" οnmοuseοut="" /> </a>
</span>
</center>
<div id="m_album" class="modbox">
<div style="" class="image" id="imgArea">
<center id="picdiv"></center>
</div>
</div>

<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var nowid=0;
var pNum=0;
var time=3000;
var starting;
var isPlaying=true;
var playContrlImg=$("playControlImg");
var picdiv=$("picdiv");
var photoIndexs=[];
for(var i=0;i<64;i++){
photoIndexs[i]='IMG_'+(i+1)+'.JPG';
}
pNum=photoIndexs.length;
if(0!=pNum){
$("imgArea").style.display='';
picdiv.innerHTML='<img src="'+photoIndexs[0]+'"border="0" /></a>';
starting=setInterval("rockPhoto()",time);
}
function m_over(ele){
if(isPlaying) ele.src="play.png";
else ele.src="pause.png";
}
function m_out(ele){
if(isPlaying) ele.src="pause.png";
else ele.src="play.gif";
}
function playControl(){
clearInterval(starting);
if(isPlaying){
isPlaying=false;
playControlImg.src="play.png";
playControlImg.title="start play";
}
else{
starting=setInterval('rockPhoto()',time);
isPlaying=true;
playControlImg.src="pause.png";
playControlImg.title="pause";
}
}
function rockPhoto(){
nowid++;
if(nowid>=pNum) nowid=0;
picdiv.innerHTML='<img src="'+photoIndexs[nowid]+'"border="0" />';
}
function next(){
rockPhoto();
}
function previous(){
nowid--;
if(nowid<0) nowid=pNum-1;
picdiv.innerHTML='<img src="'+photoIndexs[nowid]+'"border="0" />';
}
</script>
</div>
</center>
</BODY>
</HTML>