先上效果圖：

由於動態圖太大，所以只能截圖了；大致效果，圖片輪播的過程中，底下的灰色提示漸漸出現；

現在來說實現思路：

       HTML部分：

<div id="content">  
    <img id="img1" />
    <img id="img2" />
    <div id="intro">
        <span></span>
    </div>
</div>

   CSS部分：

img,div,ul,li { margin:0;padding:0;}
#content 
 
{ margin:100px auto 0 auto;width:600px; height:400px; border:1px solid #F00; position:relative;overflow:hidden;}
#img1 { position:absolute;top:0;left:0;}
#img2 { position:absolute;top:0;left:600px;}
#intro {width:600px; height:60px; position:absolute; top:340px; left:0;}
#intro span {display:block; width:600px; height:60
 
px; line-height:60px; text-align:center; color:#fff; background:rgba(160,160,160,0.6); position:absolute; z-index:2;}
img{
    width:600px;
height:400px;
}

   JavaScript部分：

window.onload=
    function(){
        /*獲得html中的元素*/
var intro=document.getElementById("intro");
var oSpan=document.getElementsByTagName
 
("span")[0];
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");
var imgarr=['images/bg.jpg','images/bg1.jpg','images/bg_01.jpg','images/lg4.jpg','images/lg.jpg'];  //圖片地址
var timer1=null;   //定時器
var timer2=null;
var timer3=null;
/*初始化*/
var a=0; //img1盒子存放圖片的陣列的索引值
var b=1; //img2盒子存放圖片的陣列的索引值
var n=0;
intro.style.top="400px";
oSpan.innerHTML='圖片說明'+(n+1);
img1.src=imgarr[a];
img2.src=imgarr[b];
timer1=setInterval(autoText,3000);   /*設定定時器*/
timer2=setInterval(changeTop,30);
//把換圖片，標籤上移的特效都綜合到一個函式裡面;並且加上改變oSpan中的文字
function autoText(){
              clearInterval(timer2);
clearInterval(timer3);
intro.style.top="400px";
timer2=setInterval(changeTop,30);
timer3=setInterval(autoImg,30);
n++;
n%=imgarr.length;  //即 n=n%imgarr.length; n對陣列長度取餘，分別為0，1，2，3，4；然後n+1對應1，2，3，4，5；
/* if(n>=imgarr.length)n=0;*/  //這個和上面取餘效果相同
oSpan.innerHTML = '圖片說明'+(n+1);
}



        //圖片自動滑動，並且修改圖片地址
function autoImg(){
            var left1=parseInt(getstyle(img1,'left'))-10;  /*每執行一次該函式，圖片就會向左移動10px*/
var left2=parseInt(getstyle(img2,'left'))-10;
img1.style.left=left1+'px';
img2.style.left=left2+'px';
/*判斷圖片是否完全消失在可見區域*/
if(left1<=-600){
                img1.style.left='600px';  /*完全消失後，立即將img1盒子轉到右邊不可見，然後給它後面的圖片地址顯示*/
a+=2;
if(a>=imgarr.length){
                    a-=imgarr.length;
}
                img1.src=imgarr[a];
clearInterval(timer3);
}
            if(left2<=-600){
                img2.style.left="600px";
b+=2;
if(b>=imgarr.length){
                    b-=imgarr.length;
}
                img2.src=imgarr[b];
clearInterval(timer3);
}

        }

        //底下灰色標籤上移，並且完全出現時，關掉指向自己的定時器
function changeTop(){
            var top=parseInt(getstyle(intro,'top'))-2;
intro.style.top=top+'px';
if(top<=340)clearInterval(timer2);
}


       //獲取元素的屬性值；封裝該函式，呼叫方便；
function getstyle(obj,str){
            return obj.currentStyle?obj.currentStyle[str]:getComputedStyle(obj)[str];
}
       }

    思路：

    1、生成DIV做外框，並設定overflow:hidden；
    2、建立一個數組imgarr，放置圖片地址
    3、生成兩個並排的圖片img1,img2，初始化圖片地址為imgarr[0]、 imgarr[1] 並使用絕對定位，便於後面移動圖片
    4、開一個定時器，間隔一定時間後，img1 img2的left值同時向左移動圖片寬度值的畫素   //移動的時候可以再開個定時器，做滑動的效果
   5、當img1的left值為負圖片寬度時，賦予img1的left值為正圖片寬度，並且將陣列的第3張圖片地址賦予img1，繼續向左移動
   6、當img2的left值為負圖片寬度時，賦予img2的left值為正圖片寬度，並將陣列的第4張圖片地址賦予img2，繼續向左移動
   7、當兩張圖片的圖片地址到了陣列的最後時，迴圈到第一個圖片地址。

涉及的新知識點：

      1、obj.style.property 是一個可讀可寫的，不僅可以獲取屬性的值，而且可以改變屬性的值；
       但是需要注意的是此方法只能獲取內嵌在行內元素的屬性值，而不能獲取內聯在 style 標籤 裡面的屬性值，如果內嵌式沒有設定某屬性（比如width），而要通過obj.style.width 來獲取該屬性值，那麼獲取的結果 空字串
      2、 obj.currentStyle.property 是IE瀏覽器支援的獲取元素屬性值得方法，可以獲得任何位置設定的元素的屬性值，包括內嵌式，內聯式，外聯式；
      3、 window.getComputedStyle(obj,null).property 比較大眾，谷歌，火狐，opera,sarifi都支援該方法獲取元素的屬性，其中第二個引數是偽類，不是必需引數，如果需要獲取的不是偽類，需要將該值設定為null，也可以不寫;
      4、 總結 ：obj.style.property只能獲取元素的內嵌式樣式屬性值，但是可讀可寫；其他兩個可以獲取內嵌式，內聯式 ，外聯式中設定的屬性值，但是隻能讀，不能改屬性值；
           特別注意一點：如果要獲取當前物件的顏色資訊，IE返回的是16進位制的'#ffffff'，而FF返回的是rgb(255,255,255)