让梦想照进现实，运动框架的使用，轮播图

最新推荐文章于 2022-05-04 14:48:38 发布

爱生活，爱编程

最新推荐文章于 2022-05-04 14:48:38 发布

阅读量134

点赞数

分类专栏： javascript基础笔记大前端全栈之路

本文链接：https://blog.csdn.net/qq_15009739/article/details/86660440

版权

javascript基础笔记同时被 2 个专栏收录

83 篇文章 1 订阅

订阅专栏

大前端全栈之路

33 篇文章 0 订阅

订阅专栏

<!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: 2600px;
			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>	
	  		</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";

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



	  		}

	  </script>

</body>
</html>

以上是所有代码，首先我们必须掌握的就是布局！

上面的布局，是我将

这样就把五张图片显示出来了，布局还是需要看一看的，子绝父相的使用，还是很牛的，另外

布局水平居中的小算法，还是要会的

布局写好，就是老三篇了，一找到控件，二，加事件，三，事件联动处理，这个我都写好多遍了，上面

无法就是点那个指示器，哪个就变成红色，然后执行动画，动画的执行，无非用运动就搞定了！

运动框架的代码

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];
	  			}
	  		}

行，这个还是比较简单的