训练营结业作业 - 轮播图

不知不觉就到了结业时间,先看看作业吧!

HTML结构:

<div id="scroll" class="scroll">
			<div id="box" class="box">
				<ul id="ul">
					<li><img src="indexbk/1.jpg" class="imgturn"></li>
					<li><img src="indexbk/2.jpg" class="imgturn"></li>
					<li><img src="indexbk/3.jpg" class="imgturn"></li>
				</ul>				
			</div>
			
			</div>

样式:

*{
				margin: 0;
				padding: 0;
				background: whitesmoke;
				font-family: sans-serif;"宋体";
				font-weight: 700;
			}
			
			ul,ol{
				list-style: none;
			}
			img{
				vertical-align: top;
			}
			.scroll{
				width: 1400px;
				height: 800px;
				margin: 100px auto;
				border: 1px solid #ccc;
				padding: 7px;				
				position:absolute;top:5px;left:20px;
			}
			.box{
				width: 1400px;
				height: 800px;
				overflow: hidden;
				position: relative;
			}
			.box ul{
				width: 1000%;
				position: absolute;
				left: 0;
				top: 0;
				
			}
			.box ul li{
				float: left;
			}
			.scroll ol{
				position: absolute;
				right: 10px;
				bottom: 10px;
				
			}
			.scroll ol li{
				float: left;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border-radius: 50%;
				background-color: pink;				
				margin-left:10px ;
				cursor: pointer;
			}
			.scroll ol li.current{
				background-color: purple;
			.imgturn{
				width:1400px
				height:800px;		}
			}
		

js:

		<script>
    window.onload = function(){
    	function animate(obj,target){
			clearInterval(obj.timer);
    		var speed = obj.offsetLeft < target ? 15 : -15;
    		obj.timer = setInterval(function(){
    			var result = target - obj.offsetLeft;
    			obj.style.left = obj.offsetLeft + speed + "px";
    			if (Math.abs(result) <= Math.abs(speed)) {
    	        	clearInterval(obj.timer);
    	        	obj.style.left = target + "px";
    	        }
    		},10);
    	}
    	
    	
    	
    	var scroll = document.getElementById("scroll"); 
    	var ul = document.getElementById("ul"); 
    	var ulLis = ul.children;
    	var liWidth = ul.children[0].offsetWidth;
    	ul.appendChild(ul.children[0].cloneNode(true));
    	var ol = document.createElement("ol");
    	scroll.appendChild(ol);
    	for (var i=0;i<ulLis.length-1;i++) {
    		var li = document.createElement("li");
    		li.innerHTML = i + 1;
    		ol.appendChild(li);
    	}
    	ol.children[0].className = "current";
    	
    	var olLis = ol.children;
    	for (var i = 0; i < olLis.length;i++) {
    		olLis[i].index = i;
    		olLis[i].onmouseover = function(){
    			for (var j = 0;j<olLis.length;j++) {
    			olLis[j].className = "";
    			}
    			this.className = "current";
    			animate(ul,-this.index * liWidth);
    			circle = key = this.index;
    		}
    	}
    	
    	
    	var timer = null; 
    	var key = 0;
    	var circle = 0;
    	
    	timer = setInterval(autoplay,1000);
    	function autoplay(){
    	
    		key++; 
    		if(key > ulLis.length-1){
    			
    			ul.style.left = 0; 
    			key = 1; 
    		}
    		
    		animate(ul,-key*liWidth-1);
    	
    		if (circle > olLis.length) {
    			circle = 0;
    		}
    		
    		for (var i = 0 ; i < olLis.length;i++) {
    		
    			olLis[i].className = ""; 
    		}
    		
    		olLis[circle].className = "current";
    		
    	}
    	scroll.onmouseover = function(){
    		clearInterval(timer);
    	}
    	scroll.onmouseout = function(){
    			
    	}  timer = setInterval(autoplay,2000);   	  	
    	
    }
</script>

好了,上面的都完成了,现在来看看实际的效果吧!

用的手机拍的,效果不是很好!有了大概样子.