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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_15009739/article/details/86660440

 

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

行,这个还是比较简单的

展开阅读全文

没有更多推荐了,返回首页