让梦想照进现实，轮播图继续

上一章，我们解决了点击指示器，然后就自动执行动画，这个很简单，这节我们添加了，

自动轮播功能和解决移动有点楞的问题，就是多加张图片的障眼法解决的！

让梦想照进现实，轮播图继续

我们在最后加一张和第一张，一模一样的图片，当移动到最后一张的时候，我们突然拉倒第一张位置，这样客户是就感觉是自动轮播无线轮播了！

让梦想照进现实，轮播图继续

行，轮播图我们就搞定了！

<!DOCTYPE html>
<html>
<head>
	<title>lunbo</title>


<!--  

		布局的计算方式，你要慢慢计算，因为这个很好玩，要学会画图！


 -->
	<style type="text/css">
		*{
			padding: 0;
			margin:0;
		}

		ul {
			list-style: none;
		}

		.box{
			width: 520px;
			height: 353px;
			background-color: #bfa;
			margin: 50px 100px;
			position: relative;
			overflow: hidden;
		}

		.box ul {
			width: 3120px;
			height: 353px;
			position: absolute;
			left: 0px;
			top: 0px;

		}

		.box ul li {
			float: left;
			background-color: #ccc;
			margin: 10px 10px;
		}


		#pointer{
			position: absolute;
			bottom: 25px;
			left: 50%;
			margin-left: -87px;		
		}

		#pointer a {
			float: left;
			width: 25px;
			height:25px;
			margin:5px;
			background-color: #bfa;
		}



	</style>



</head>
<body>

	<!--
			这个轮播我还是要手写的，没啥，因为确实需要
			练习下布局的能力
			我相信我自己可以做得到！
	
	  -->



	  <div class="box">
	  		<ul id = "imgList">
	  			<li><img src="img/1.jpg"></li>	
	  			<li><img src="img/2.jpg"></li>	
	  			<li><img src="img/3.jpg"></li>	
	  			<li><img src="img/4.jpg"></li>	
	  			<li><img src="img/5.jpg"></li>
	  			<li><img src="img/6.jpg"></li>		
	  		</ul>
	  		<div id="pointer">
	  			
	  			<a href="#"></a>
	  			<a href="#"></a>
	  			<a href="#"></a>
	  			<a href="#"></a>
	  			<a href="#"></a>
	  		</div>

	  </div>

	  <button id ="move">move</button>



	  <script type="text/javascript">
	  	function startMove(obj,json,fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var bStop = true;
                for(attr in json){
                    // 1. 取得当前的值（可以是widht，height，opacity等的值）
                    var objAttr = 0;
                    if(attr == "opacity"){
                        objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
                    }else{
                        objAttr = parseInt(getStyle(obj,attr));
                    }
                    // 2.计算运动速度
                    var iSpeed = (json[attr] -objAttr)/10;
                        iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
                    // 3. 检测所有运动是否到达目标
                    if(objAttr != json[attr]){
                        bStop = false;
                    }
                    if(attr == "opacity"){
                        obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
                        obj.style.opacity = (objAttr+iSpeed)/100;
                    }else{
                        obj.style[attr] =  objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
                    }
                }
                if(bStop){ // 表示所有运动都到达目标值
                    clearInterval(obj.timer);
                    if(fn){
                        fn();
                    }
                }
            },30);
        }


	  		// 获取样式属性
	  		function getStyle(obj,attr){
	  			if(window.getComputedStyle){
	  					return window.getComputedStyle(obj,null)[attr];
	  			}else{
	  				return obj.currentStyle[attr];
	  			}
	  		}	

	  		//更新指示器
	  		function updatePointer(aLis,index){
	  			for(var i =0;i<aLis.length;i++){
	  				aLis[i].style.backgroundColor = "#bfa";
	  			}
	  			aLis[index].style.backgroundColor = "red";

	  		}



	  		window.onload = function(){

	  			var oBtn = document.getElementById('move');
	  			var imgList = document.querySelector('#imgList');
	  			// oBtn.onclick = function(){
	  			// 		imgList.style.left = (parseInt(getStyle(imgList,"left"))-520) + "px";
	  			// }
	  			// 老三篇
	  			// 1,找到控件， 2 设置事件监听，3 事件联动处理！
	  			var aLis = document.querySelectorAll('#pointer a');
	  			var currentIndex = 0;
	  			aLis[currentIndex].style.backgroundColor = "red";
	  			var timer = null;

	  			
	  			function auto(){
	  				timer = setInterval(next,2000);
		  		}

		  		function stopAuto(){
		  			clearInterval(timer);
		  			timer = null;
		  		}

		  		function next(){

		  			currentIndex = ++currentIndex;
		  			if(currentIndex>=aLis.length){
		  					//2 ,执行动画
		  				startMove(imgList,{"left":currentIndex * (-520)},function(){
		  					currentIndex =0;	
		  					// 瞬间移动到第一张
		  					imgList.style.left ="0px";
		  					
		  				});
		  				updatePointer(aLis,0);
		  						  				
		  			}else{
			  					// 1, 切换指示器
			  			updatePointer(aLis,currentIndex);
			  			//2 ,执行动画
			  			startMove(imgList,{"left":currentIndex * (-520)});		
		  			}

		  		

		  		}

	  			for(var i = 0; i<aLis.length;i++){
	  				var oli = aLis[i];
	  				oli.index = i;
	  				oli.onclick = function(){
	  					currentIndex = this.index;
	  					updatePointer(aLis,this.index);
	  					// 1, 清空自动轮播
	  						stopAuto();
	  					// 开启动画移动到指定位置！
		  					// 1, 找一个运动框架，用一用就行了！
		  					startMove(imgList,{"left":this.index * (-520)},function(){
		  						// 执行动画结束后，开启自动轮播
		  						auto();
		  					});
	  				}
	  			}	

	  			// 下面就是可以自动播放的操作！
	  			auto();






	  		}

	  </script>

</body>
</html>

让梦想照进现实，轮播图继续

相关推荐