先上效果图：
由于动态图太大，所以只能截屏了；大致效果，图片轮播的过程中，底下的灰色提示渐渐出现；
现在来说实现思路：
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:60px; 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)
参考博客：谢家老树的JS原生代码实现图片轮播无缝切换的一种思路