四十九1

轮播图
（“尚硅谷”中的通过改变偏移的方法完成轮播图）
HTML（需完成窗口div（outer）和图片放置div（imgList），outer大小为图片大小+边距，
imgList大小为所投图片相加总和（需加上图片之间的间距）。
navDiv为图片上的导航条）

css（各部分需开启定位，outer需使用 （overflow: hidden;）剪裁溢出的imgList部分。
div的大小设置可在css完成，部分需要变换的大小（比如imgList宽度有图片数量决定）需要由js完成数值设定）

（js部分代码）
window.onload = function(){
//设置imglist的宽度
var imgList = document.getElementById(‘imgList’);

//获取页面中的所有img标签
var imgArr = document.getElementsByTagName('img');
//设置imgList宽度
imgList.style.width = 280*imgArr.length+"px";

//设置导航按钮居中
//获取navDiv
var navDiv = document.getElementById('navDiv');
//获取outer
var outer = document.getElementById('outer');
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";

//默认显示图片的索引
var index = 0 ;

//获取所有的a
var allA = document.getElementsByTagName('a');

//设置默认选中的各效果
allA[index].style.backgroundColor = "black";

/*点击超链接切换到对应的的图片*/
//为所有超链接绑定单级响应函数
for(var i= 0;i< allA.length;i++){
	
	//为每一个超链接都添加一个num属性
	allA[i].num = i; 
	
	//为超链接绑定单击响应函数
	allA[i].onclick = function(){
		
		//关闭自动切换定时器
		clearInterval(timer1);
		
		//获取点击超链接的索引，并将其设置为index
		index = this.num;
		
		//切换图片
		/*第一张  0 0
		 * 第二张  1 -280
		 * 第三章  2 -560
		 */

// imgList.style.left = -280*index + “px”;（使用move函数后，即可不用设置偏移量，由函数处理）

		//修改正在选中的a
		setA();
		
		move(imgList,"left",-280*index,20,function(){
			//动画执行完毕，开启自动切换
			autochange();
		})；	
	};
	
}
	autochange();


//创建一个方法，用来设置选中的a
function setA(){
	
	// 判断当前索引是否是最后一张图片
	if(index >= imgArr.length-1){
		// 将index设置为0
		index = 0;
		
		// 此时显示的是最后一张图片，二最后一张和第一张是一米一样的
		//通过css将最后一张切换位第一行在那个
		imgList.style.left = 0;
		
	}
	
	//遍历所有的a，并将背景色设置为红色
	for(var i= 0;i< allA.length;i++){
		allA[i].style.backgroundColor = "";
	}
	//将选中的a设置为黑色
	allA[index].style.backgroundColor = "black";
	
}

//定义一个自动切换的定时器
var timer1;
//创建一个函数，用来开启自动切换图片
function autochange(){
	// 开启一个定时器，用来定时切换图片
	timer1 =  setInterval(function(){
		
		//使索引自增
		index++;
		
		// 判断index的值
		index %= imgArr.length;
		
		//执行动画切换图片
		move(imgList,"left",-280*index,20,function(){
			// 修改导航点
			setA();
		})
		},3000);		
}