js中如果实现图片转换的问题

比如，有几张图片。我们设置个定时器，到莫个时刻，就显示一张图片，显示的图片覆盖前图片。到最后一张图片时，覆盖第一张图片。请各位高手，指教下哦···

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html#1657921
这个？
学习了··谢谢你···我想用定时器加层，然后使用display属性去实现哦。··
<img src="p1.jpg" id="__img" /><script type="text/javascript">
var pnum = 1 ;
var cimg = function(){
   pnum++ ;
   document.getElementById('__img').src ='p' + pnum + '.jpg';
}
var si = setInterval(cimg,1000)
</script>
var ostat = false;
function scrollstop() {news.scrollAmount = 0;ostat = true;}
function scrollplay() {news.scrollAmount = 5;ostat = false;}
function scrolldir() {mid = screen.width / 2;mouse = event.x;
if(mouse > mid) {
if(ostat == false) {
speed = (mouse - mid) / 30;news.scrollAmount = speed;}
news.direction = "right";}
else {if(ostat == false) {
speed = (mid - mouse) / 30;
news.scrollAmount = speed;}
news.direction = "left";
   }
}var slideShowSpeed = 7000;
var crossFadeDuration = 7;
var Pic = new Array();
Pic[0] = 'image/pic_top02.jpg'
Pic[1] = 'image/pic_top03.jpg'
Pic[2] = 'image/pic_top04.jpg'
Pic[3] = 'image/pic_top05.jpg'
Pic[4] = 'image/pic_top06.jpg'
Pic[5] = 'image/pic_top07.jpg'
Pic[6] = 'image/pic_top08.jpg'
Pic[7] = 'image/pic_top09.jpg'
Pic[8] = 'image/pic_top10.jpg'
Pic[9] = 'image/pic_top11.jpg'
Pic[10] = 'image/pic_top12.jpg'
Pic[11] = 'image/pic_top13.jpg'
Pic[12] = 'image/pic_top14.jpg'
Pic[13] = 'image/pic_top15.jpg'
Pic[14] = 'image/pic_top16.jpg'
Pic[15] = 'image/pic_top17.jpg'
Pic[16] = 'image/pic_top18.jpg'
Pic[17] = 'image/pic_top19.jpg'
Pic[18] = 'image/pic_top20.jpg'
Pic[19] = 'image/pic_top01.jpg'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
<body onload="runSlideShow()"
轮播……用JQ可以实现和flash的那种非常相似的效果。http://interface.eyecon.ro/demos/slideshow.html
在这里设个数值上限就可以了到达上限就重新赋值为1
pnum=1 ;var cimg=function(){
   pnum++ ;》》pnum=1 ;
MaxPnum = 10；
var cimg=function(){
   if(pnum>MaxPnum){pnum = 1;}else{pnum++;}
刚做的，需要jquery-1.3.2.js，把上面3张换掉就行了，加图也可以的，不过下面的DIV也要跟着加。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">var tempArray=new Array("img/eec91035a584653191ef3941.jpg",
"img/lit_1191B33CD05QC.jpg",
"img/OOOPIC_mihoutao_20090212e9c9af932405369c.jpg"
);
var count=1;
function btnClick(){
//
$("#img1").fadeIn("slow");
$("#img2").fadeIn("slow");

}
var stopTime;
function Forward(){
//$("#img1").attr("src",tempArray[count]);
//alert($("#img1").attr("src"))
count++;
if(count==tempArray.length){
$("#"+(count-1)).css("background-color","");
count=0;
}
//alert(count);
$("#img1").fadeOut("slow",function (){$("#img1").attr("src",tempArray[count])});
$("#img2").fadeOut("slow",function (){$("#img2").attr("src",tempArray[count])});
//$("#img2").fadeTo("slow",0.10);
//$("#img2").attr("src",tempArray[count])

//$("#img2").attr("src",tempArray[count];
$("#0").css("background-color","");
$("#1").css("background-color","");
$("#2").css("background-color","");
$("#"+count+"").css("background-color","red");
//alert($("#img1").attr("src"))
setTimeout("btnClick()",200);
stopTime=setTimeout("Forward()",3000);
//count++;
}function bl(){
$("#img2").fadeTo("fast",0.05);
$("#img1").attr("src",tempArray[0]);
$("#img2").attr("src",tempArray[0]);

$("#0").css("background-color","red");
$("#img1").fadeIn("slow");
setTimeout("Forward()",2000);
}function mouseOut(){
count+=1;
if(count>tempArray.length||count==tempArray.length){

$("#"+(count-1)).css("background-color","");
count=0;
}
Forward();
}
function checkPic(obj){
clearTimeout(stopTime);

$("#img1").fadeOut("slow",function (){$("#img1").attr("src",tempArray[obj])});
$("#img2").fadeOut("slow",function (){$("#img2").attr("src",tempArray[obj])});
$("#0").css("background-color","");
$("#1").css("background-color","");
$("#2").css("background-color","");
$("#"+obj+"").css("background-color","red");

//$("#img1").attr("src",);
setTimeout("btnClick()",200);
count=parseInt(obj);
//alert(count);
}
</script>
</head><body onload="bl();" style="background-color: black;">
    <div id="front">
        <div id="hello">
<div><img id="img1" src="" style="width: 500px;height: 300px;">
<img id="img2" src=""  style="width: 500px;height: 200px;filter:FlipV alpha(Opacity=5);"></div>

<div style="position: absolute;top: 260px;left: 380px;width: 100px" >
<div id="0" onmouseover="checkPic('0');" onmouseout="mouseOut()" style="border: 1px solid;width: 30px;height: 30px;color: white ;text-align: center;float: left;display: inline;">1</div>
<div id="1" onmouseover="checkPic('1');" onmouseout="mouseOut()" style="border: 1px solid;width: 30px;height: 30px;color: white ;text-align: center;float: left;display: inline;">2</div>
<div id="2" onmouseover="checkPic('2');" onmouseout="mouseOut()" style="border: 1px solid;width: 30px;height: 30px;color: white ;text-align: center;float: left;display: inline;">3</div>
</div>
</div>
    </div>
</body></html>
动态改变 Img 属性的src的值，也许这是最简单的啊，图片路径值存在数组，然后循环遍历组中的值
<img src="p1.jpg" id="__img" />
<script type="text/javascript">
var pnum = 1 ;
var pcount = 4; //图片数量
var cimg = function(){
   document.getElementById('__img').src ='p' + pnum + '.jpg';
   pnum++ ;
   if(pnum > pcount)
      pnum = 1;
}
var si = setInterval(cimg,1000);
</script>