就是连续放五张图片,他隔几秒就自动显示第二张,接着第三张,
但是他只占 一个图片的位
就是 在显示第一张的地方隔几秒显示第二张<div id="NewsPic" style="float:left; position:relative;">
<a title="" href="#" target="_blank"><img class="Picture" src="images/4f2f4a5d-e516-417d-977f-7aabf76b1d22.jpg" alt="a" /></a>
<a title="" href="#" target="_blank"><img class="Picture" src="images/17e7d7f5-d90d-428e-8654-b4b9f3170a06.jpg" alt="a"/></a>
<a title="" href="#" target="_blank"><img class="Picture" src="images/b686e7e0-37ec-4aa9-a726-fc40ca3e6fb6.jpg" alt="a"/></a>
<a title="" href="#" target="_blank"><img class="Picture "src="images/3512c724-bc75-4eeb-aed7-336c1c5729fe.jpg" alt="a"/></a>
</div>
但是他只占 一个图片的位
就是 在显示第一张的地方隔几秒显示第二张<div id="NewsPic" style="float:left; position:relative;">
<a title="" href="#" target="_blank"><img class="Picture" src="images/4f2f4a5d-e516-417d-977f-7aabf76b1d22.jpg" alt="a" /></a>
<a title="" href="#" target="_blank"><img class="Picture" src="images/17e7d7f5-d90d-428e-8654-b4b9f3170a06.jpg" alt="a"/></a>
<a title="" href="#" target="_blank"><img class="Picture" src="images/b686e7e0-37ec-4aa9-a726-fc40ca3e6fb6.jpg" alt="a"/></a>
<a title="" href="#" target="_blank"><img class="Picture "src="images/3512c724-bc75-4eeb-aed7-336c1c5729fe.jpg" alt="a"/></a>
</div>
<div id="js_F" style="left: 485px; z-index: 104; width: 115%; height: 255px; top: -1581px;">
</div> <script type="text/javascript">
<!--///*--><![CDATA[/*><!--*/
var js_F = document.getElementById("js_F");
var imgList = ['images/slideshow/fullsize/shou5.jpg', 'images/slideshow/fullsize/shou6.jpg', 'images/slideshow/fullsize/shou7.jpg', 'images/slideshow/fullsize/shou8.jpg', 'images/slideshow/fullsize/shou9.jpg', 'images/slideshow/fullsize/shou10.jpg', 'images/slideshow/fullsize/shou11.jpg', 'images/slideshow/fullsize/shou12.jpg'];
var imgTemp = new Array();
for (i=0; i<imgList.length; i++){
imgTemp[i] = new Image();
imgTemp[i].src = imgList[i];
}
var imgs = new Array();
var imgID = 0, nextImgID, proveImgID;
var tf = true; //图片移动方向标志
var speed1 = 10; speed2 = 3000; //速度
function imgInit(){
var content = '';
for (i=0; i<imgList.length; i++){
content += "<a href='ShowProducts.aspx?userid=" + imgint[i] + "'><img src='" + imgList[i] + "' style='left:0;width:400px;height:260px'/></a>\n";
}
js_F.innerHTML = content;
imgs = js_F.getElementsByTagName('img');
imgs[0].style.zIndex = 20;
imgs[1].style.zIndex = 15;
}
function imgChange(){
if ((imgID+1)<imgList.length){
nextImgID = imgID + 1;
} else if (imgID<imgList.length) {
nextImgID = 0;
} else {
imgID = 0;
nextImgID = imgID + 1;
}
imgs[imgID].style.zIndex = 20;
imgs[nextImgID].style.zIndex = 15;
setTimeout('imgShow()',speed2);
}
function imgShow(){
if (tf){ //imgID向左边移动2/3,nextImgID向右边1/3
if (parseInt(imgs[imgID].style.left)>-180){
imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)-10) + 'px';
imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)+5) + 'px';
setTimeout('imgShow()',speed1);
} else {
tf = !tf;
imgs[imgID].style.zIndex = 15;
imgs[nextImgID].style.zIndex = 20;
setTimeout('imgShow()',speed1);
}
} else {
if (parseInt(imgs[imgID].style.left)<0){
imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)+10) + 'px';
imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)-5) + 'px';
setTimeout('imgShow()',speed1);
} else {
imgs[imgID].style.zIndex = 10;
tf = !tf;
imgID++;
imgChange();
}
}
}
imgInit();
imgChange();
/*]]>*///--></script>
楼主试试这个吧,把图片换成你自己的
<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"><img src="/upload/tech/20091012/20091012094107_6512bd43d9caa6e02c990b0a82652dca.gif" id="photo" style=""></div>
</body>
</html>
<script> function tM(Message)
{
$("testMessage").innerHTML=Message
}
function dR(topr)
{
document.write(topr)
}
function $(eleId)
{return document.getElementById(eleId)}
//預載圖片
var imasrc=new Array("/upload/tech/20091012/20091012094108_9be40cee5b0eee1462c82c6964087ff9.jpg"
,"/upload/tech/20091012/20091012094111_d707329bece455a462b58ce00d1194c9.jpg"
,"/upload/tech/20091012/20091012094114_7f6ffaa6bb0b408017b62254211691b5.jpg"
,"/upload/tech/20091012/20091012094118_26337353b7962f533d78c762373b3318.jpg"
,"/upload/tech/20091012/20091012094122_2f885d0fbe2e131bfc9d98363e55d1d4.jpg"
,"/upload/tech/20091012/20091012094124_6faa8040da20ef399b63a72d0e4ab575.jpg"
,"/upload/tech/20091012/20091012094128_9c838d2e45b2ad1094d42f4ef36764f6.jpg"
,"/upload/tech/20091012/20091012094132_1141938ba2c2b13f5505d7c424ebae5f.jpg")//圖片路徑寫入數組
var preIma=new Array()
var dB=new Date()
for (i=0;i < imasrc.length;i++)//預載所有圖片
{
preLoadImg(i)
}
function preLoadImg(imgIndex)//預載指定圖片圖片
{
preIma[imgIndex]=new Image()
preIma[imgIndex].imgReadyStatus=false
preIma[imgIndex].imgIndex=imgIndex
preIma[imgIndex].onload=imgLoad
preIma[imgIndex].onerror=imgError
preIma[imgIndex].onabort=imgAbort
preIma[imgIndex].src=imasrc[imgIndex]
}
function imgLoad()//預載完成
{
this.imgReadyStatus=true
}
function imgError()//預載失敗
{
preLoadImg(this.imgIndex)
}
function imgAbort()//預載取消
{
preIma.splice(this.imgIndex,1)
}
var checkAgain
function checkImgReadyStatus()//檢索加載狀態
{
var imgReadyStatus=true
var persent=0
var dE=new Date()
for (i=0;i < preIma.length;i++)
{
if (!preIma[i].imgReadyStatus)
{imgReadyStatus=false}
else
{persent++}
}
tM("完成:"+(persent/preIma.length*100).toFixed(2)+"%<br>載入:"+persent+"張圖片<br>消耗時間:"+((dE-dB)/1000).toFixed(0)+"秒")//顯示進度
if (imgReadyStatus)
{
$("photoContrl").style.display="block"
autoPlay()
clearTimeout(checkAgain)
}
else
{
checkAgain=setTimeout(checkImgReadyStatus,1000)//檢索頻率
}
}
checkImgReadyStatus() //幻燈片效果
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>
http://topic.csdn.net/u/20090801/11/fb82aa1e-f23e-4f99-8e39-fc2628d3b3f8.html