javascript学习笔记之用js完成轮播图思路

1 首先封装一个animal函数（用来平移用的，里面会传2个参数，第一个是需要平移的element，第二个是需要平移的目标距离）
2 用小圆圈鼠标放上去的轮播图
1.首先HTML中我们用一个div包裹作为相框，div里面包裹ul>li列表，li里面包裹你想进行轮播的图片，（注意文件流移动定位必须position:absolute，还有一个要注意的点是我们移动的是ul，是把ul进行移动，为ul定义样式时的宽度需为所有照片加起来的宽度）
2.我们获取到所需的标签（相框、相框的宽度–offsetWidth，相框的子元素ul，小圆圈的div）
3 用for循环对小圆圈进行循环，为每个小圆圈添加onmouseover事件，为每个小圆圈添加index属性，便于后面计算平移的距离
4 调用animal函数进行平移即可
/head>

• 
• 
• 
• 
• 

	    

	    	
	    	
	    	
	    	
	    	
	    
	    

	    	

	    		
我的课程表
	    		

	    			

	    				

							
继续学习 程序语言设计
							
正在学习-使用对象
						
						

							
继续学习 程序语言设计
							
正在学习-使用对象
						
						

							
继续学习 程序语言设计
							
正在学习-使用对象
						
	    			
	    			全部课程
	    		
	    	
	    	
	    
	

自动播放
设置一个定时器，在function函数里面首先定义一个count值为0，count自增，如果count等于图片数量-1，则把count归零，重新从第一张图片开始，然后把图片的位置设为0；
//自动播放
var timeId= setInterval(clickHandle,1000);
function clickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + “px”;//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = “”;
//第一个按钮颜色设置上
olObj.children[0].className = “current”;
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute(“class”);
}
olObj.children[pic].className = “current”;
}
};
3左右按钮播放
给按钮添加onclick事件，调用上面的clickHandle()函数，
//右边按钮
my$("right").onclick=clickHandle;//左边按钮my$(“left”).onclick = function () {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + “px”;
}
pic–;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色—所有的小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute(“class”);
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = “current”;

};