图片的轮播相信大家都不陌生，各大购物网站基本都能看见，之前用css样式加HTML也可以实现，之前我们的轮播是通过位置的偏移，今天图片的轮播我们是通过改变图片的路径加上定时器实现的。先来看看静态时的效果，如下图：

布局代码如下：

<div class="scroll_mid">
	<img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" />
	<ul id="number">
		<li id="scroll_number_1" onmouseover="scrollPic(0)" onmouseout="scrollNumOut()">1</li>
		<li id="scroll_number_2" onmouseover="scrollPic(1)" onmouseout="scrollNumOut()">2</li>
		<li id="scroll_number_3" onmouseover="scrollPic(2)" onmouseout="scrollNumOut()">3</li>
		<li id="scroll_number_4" onmouseover="scrollPic(3)" onmouseout="scrollNumOut()">4</li>
		<li id="scroll_number_5" onmouseover="scrollPic(4)" onmouseout="scrollNumOut()">5</li>
		<li id="scroll_number_6" onmouseover="scrollPic(5)" onmouseout="scrollNumOut()">6</li>
	</ul>
</div>

布局我们不过多的说了，我们要做的效果是加载页面后自己滚动，当鼠标停在数字上时就停止轮播，并显示相对应的那张图片。话不多说来看看js代码如下：

//数组保存图片的路径
var imgurl=new Array();
imgurl[0]="images/dd_scroll_1.jpg";
imgurl[1]="images/dd_scroll_2.jpg";
imgurl[2]="images/dd_scroll_3.jpg";
imgurl[3]="images/dd_scroll_4.jpg";
imgurl[4]="images/dd_scroll_5.jpg";
imgurl[5]="images/dd_scroll_6.jpg";

//数组保存对应的红点点 的id
var num=new Array();
num[0]="scroll_number_1";
num[1]="scroll_number_2";
num[2]="scroll_number_3";
num[3]="scroll_number_4";
num[4]="scroll_number_5";
num[5]="scroll_number_6";

var index=0;//数组的下标  代表图片途径
var sss=setInterval(scrollPic,1000);  //第五步调用定时器
function scrollPic(id){
	if (id>=0) {   //第十一步 如果传过来的id>0 时
		index=id;   //第十二步就把id赋值给下标 相当于悬停时显示对应的那张图片
		clearInterval(sss); //第十三步 停止轮播
	}
	var img=document.getElementById("dd_scroll"); //第一步获取图片对象
	img.src=imgurl[index];  //第二步图片的路径等于数组保存的图片路径
	for (var i=0;i<num.length;i++) {   // 第六步循环获取红点点的id
		var nums=document.getElementById(num[i]); //第七步获取红点点对象
		if (index==i) {  //第八步如果保存图片数组的下标等于保存红点点数组的下标时
			nums.className="scroll_number_over";  // 第九步那么对应的就变红  className变红样式
		}else{
			nums.className="scroll_number_out"; //第十否则其他的就变透明  className变透明样式
		}
	}
	index++; //第三步自加
	if (index==imgurl.length) {  //第四步当等于保存图片路径数组的长度时
		index=0;//就又赋值为0
	}
}
//第十四步离开时又开始轮播
function scrollNumOut() {
	sss=setInterval(scrollPic,1000);
}

js代码如上，基本的步骤在代码中的注释都有写（纯属个人理解步骤，如有错误欢迎指正）。说一下大概的思路。

第一我们先创建一个数组，用来保存图片的路径。

第二我们开始写方法，方法里大概就是先获取图片对象，然后声明一个变量index用来接收数组的下标，数组下标也就是代表了图片的路径，然后改变图片路径，改变之后，index每次自加1，当index等于数组的长度时就又把index赋值为0；

第三我们定义一个定时器，每隔1秒调用一个改变图片路径的方法。这样我们基本的图片滚动已经实现了。

第四步就是让图片边上的数字跟随图片滚动。一样的先用数组保存，然后在用for循环，在循环中根据id获取对应红点点对象，在循环中判断，当index下标等于保存红点点数组的下标时，对应的变红，其他的变透明。到这红点点也就跟随图片一起滚动了。

第五步就是当鼠标停在数字上时，显示对应的图片，并且停止轮播，离开时又开始轮播。首先我们先在方法中带个参数id，在判断如果传过来的id大于0时就把id赋值给下标index，相当于悬停时显示的就是对应的那张图片，图片出来了，剩下的就是停止轮播，这个就直接用 clearInterval()清除定时器就是了

第六步，离开时轮播又开始，一样的写一个方法再把定时器重新赋值就可以了 在用onmouseout()调用就可以了，到这js就实现简答的轮播了，以上纯属个人观点，如有错误欢迎指正。最后我们来看看整体的效果。如下：

谢谢大家，希望能给大家带来收获。