js+css无缝滚动轮播图

通过js和css3的transition属性的过渡效果写了无缝轮播图

css代码就不放了，有些乱

效果图如下:

html主体部分

		

			
			
 
			
 
			

			

			

			
 
		
		

		

			<
			>
		
		

			

			

			

			

		
	

script代码:

window.οnlοad=function(){
			var ULimg=document.getElementById('ul-img'),
			 	prev=document.getElementById("left"),
			 	next=document.getElementById("r"),
			 	main=document.getElementById("main"),
			 	cicle=document.getElementById("cicle").getElementsByTagName('div'),
				num=0, 
				timer;
			prev.οnclick=function(){
				ULimg.style.left=ULimg.offsetLeft-600+"px"; //一张图片宽度为600px
				if (ULimg.offsetLeft<=-2400) { 
				//当装有图片的容器移动到图片4(图片4后是图片1)的位置时，调用setTimeout函数，在0.2s以后取消transition过渡效果,同时容器移动到图片1的位置,然后再启用transition过渡效果,设置0.2s是因为要和transition的过渡时间保持一致,也就是当图片4移动到最末尾的图片1的位置那一瞬间,取消transition效果，然后立即跳回位于开始的图片1,然后再启用transition效果，以实现首尾间的无缝滚动
					setTimeout(function(){
						ULimg.style.transition="left 0s";
						ULimg.style.left="-600px";
						setTimeout(function(){ 
						//这里只写ULimg.style.transition="left 0.2s"语句会将之前的ULimg.style.transition="left 0s";覆盖,所以就又用了setTimeout(看视频知道的)
							ULimg.style.transition="left 0.2s";
						},10);
					},200);
				}
				num++; 
				show();
			};
			next.οnclick=function(){
				ULimg.style.left=ULimg.offsetLeft+600+"px"; 
				if (ULimg.offsetLeft>=-600) { //原理同上
					setTimeout(function(){
						ULimg.style.transition="left 0s";
						ULimg.style.left="-2400px";
						setTimeout(function(){
							ULimg.style.transition="left 0.2s";
						},10);
					},200);
				}
				num--;
				show();
			};
			function auto(){ //自动轮播函数
				timer=setInterval(function(){
					prev.onclick();
				},2000);
			}
			auto();
			main.οnmοuseοver=function(){ //滑入停止轮播
				clearInterval(timer);
			};
			main.οnmοuseοut=function(){
				auto();
			};
			cicle[0].style.background="orange";
			function show(){ //让第num个小圆点高亮显示的函数
				if (num>3) { //num的取值范围是0-3，分别对应图片1到图片4
				num=0;
				}else if(num<0){
					num=3;
				}
				for (var i = 0; i < cicle.length; i++) {
					cicle[i].style.background="";
				}
				cicle[num].style.background="orange";
			}
			for(var i=0;i

前端初学者一个,基本功能算是实现了，若能提出一些建议,或是更好的方法，感激不尽!