您的位置：首页 > Web前端 > JavaScript

javascript图片切换效果/带文字

2010-03-04 21:33 453 查看

纯图片版：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Slideshow</title>

<mce:script type="text/javascript" charset="utf-8"><!--
var galleryarray = ['dog.gif','cat.gif','penguin.gif'];
var curimg=0;
function rotateimages(){

document.getElementById("slideshow").setAttribute("src","img/"+galleryarray[curimg])
//document.getElementById("slideshow").src="img/"+galleryarray[curimg]
curimg=(curimg<galleryarray.length-1)?curimg+1:0
}
window.onload=function(){
setInterval("rotateimages()",2500)
}

// --></mce:script>
</head>
<body>
<div style="width:170px;height:160px;border:4px solid #e2e2e2;margin:0 auto;">
<img id="slideshow" src="img/cat.gif" mce_src="img/cat.gif">
</div>

</div>
</body>
</html>

图片＋文字说明

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Slideshow</title>

<mce:script type="text/javascript" charset="utf-8"><!--

var galleryarray =
['dog.gif|dog','cat.gif|cat','penguin.gif|penguin'];
var curimg=0;
function rotateimages(){

document.getElementById("slideshow").setAttribute("src","img/"+galleryarray[curimg].split("|")[0])
document.getElementById("showTxt").innerHTML=galleryarray[curimg].split("|")[1];
//document.getElementById("slideshow").src="img/"+galleryarray[curimg]
curimg=(curimg<galleryarray.length-1)?curimg+1:0
}
window.onload=function(){
setInterval("rotateimages()",2500)
}
// --></mce:script>
</head>
<body>
<div style="margin:0 auto;width:200px;">
<div style="width:170px;height:160px;border:4px solid #e2e2e2;">
<img id="slideshow" src="img/cat.gif" mce_src="img/cat.gif" src="img/cat.gif" mce_src="img/cat.gif">
</div>

<span>This is </span><span style="padding:8px;" mce_style="padding:8px;" id="showTxt">cat</span>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航