页面的head部分，设置好页面各元素的样式，以下代码已添加了部分注释，代码如下：

接着引入一个JS文件，并设置好切换点击的响应和轮播响应，代码如下：

<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript">
window.onload=function(){
	var oPic=document.getElementById('pic');
	var oPrev=getByClass(oPic,'prev')[0];
	var oNext=getByClass(oPic,'next')[0];
	var aLi=oPic.getElementsByTagName('li');
	var arr=[];
	for(var i=0;i<aLi.length;i++){
	    var oImg=aLi[i].getElementsByTagName('img')[0];
	 	arr.push([parseInt(getStyle(aLi[i],'left')),parseInt(getStyle(aLi[i],'top')),
		getStyle(aLi[i],'zIndex'),oImg.width,parseFloat(getStyle(aLi[i],'opacity')*100)]);
	}

	oPrev.onclick=function(){
	    arr.push(arr[0]);
		arr.shift();
	    for(var i=0;i<aLi.length;i++){
		    var oImg=aLi[i].getElementsByTagName('img')[0];
			aLi[i].style.zIndex=arr[i][2];
			startMove(aLi[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][4]});
			startMove(oImg,{width:arr[i][3]});
		}
	}
	 
	oNext.onclick=function(){
        arr.unshift(arr[arr.length-1]);
	    arr.pop();
	    for(var i=0;i<aLi.length;i++){
		    var oImg=aLi[i].getElementsByTagName('img')[0];
			aLi[i].style.zIndex=arr[i][2];
			startMove(aLi[i],{left:arr[i][0],top:arr[i][1],opacity:arr[i][4]});
			startMove(oImg,{width:arr[i][3]});
		}
	}
	 
	function getStyle(obj,name){
       if(obj.currentStyle){ return obj.currentStyle[name];}
	   else{ return getComputedStyle(obj,false)[name];}
	}
}
  
function getByClass(oParent,sClass){
    var aResult=[];
	var aEle=oParent.getElementsByTagName('*');
	for(var i=0;i<aEle.length;i++){
		if(aEle[i].className==sClass){
			aResult.push(aEle[i]);
		}
	}
	return aResult;
}
</script>

页面的body部分，需要轮播的多张图片放入不同li里面，代码如下：

<div class="pic" id="pic">
	<span class="prev"><img src="image/arrow1.png" alt="arrow" /></span>
	<span class="next"><img src="image/arrow2.png" alt="arrow" /></span>
	<ul>
		<li class="pic1"><a href="#"><img src="image/f1.jpg" /></a></li>
		<li class="pic2"><a href="#"><img src="image/f2.jpg" /></a></li>
		<li class="pic3"><a href="#"><img src="image/f3.jpg" /></a></li>
		<li class="pic4"><a href="#"><img src="image/f4.jpg" /></a></li>
		<li class="pic5"><a href="#"><img src="image/f5.jpg" /></a></li>
		<li class="pic6"><a href="#"><img src="image/f6.jpg" /></a></li>
	</ul>
</div>