JavaScript运动框架——【小案例】淘宝首页图片切换效果

最新推荐文章于 2024-07-21 10:17:51 发布

喋喋小菜鸡

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量940

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/DebbyOctober/article/details/108839143

版权

这一节讲运动框架的实用小案例——淘宝首页图片切换效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{margin: 0;padding: 0;}
		#box{
			width: 480px;
			height: 280px;
			overflow: hidden;
			margin: 50px auto;
			position: relative;
		}
		ul{
			list-style: none;
			width: 1920px;
			height: 280px;
		}
		ul li{
			float: left;
			width: 480px;
			height: 280px;
		}
		#btn div{
			width: 100px;
			height: 50px;
			background: darkmagenta;
			text-align: center;
			color: #fff;
			position: absolute;
			top: 115px;
			line-height: 50px;
			border-radius: 50%;
		}
		#btn1{
			left: 0;
		}
		#btn2{
			right: 0;
		}
		
	</style>
	<body>
	<div id="box">
		<ul id="uls">
			<li><img src="imgs/1.jpg" alt=""></li>
			<li><img src="imgs/2.jpg" alt=""></li>
			<li><img src="imgs/3.jpg" alt=""></li>
			<li><img src="imgs/4.jpg" alt=""></li>
		</ul>
		<div class="btn">
			<div id="btn1">左</div>
			<div id="btn2">右</div>
		</div>
	</div>
		
	<script>
	//获取id
    var box= document.getElementById("btn");
    var btn = box.getElementsByTagName("div");
   var uls = document.getElementById("uls");
    var lis = document.getElementsByTagName("li");

    //做循环
    for(var i=0;i<btn.length;i++){

    btn[i].index = i;//为了区分两个div
    
	btn[i].onclick = function(){
   //给每个按钮加入单击事件
        
		if(this.index==0){

         //借用运动框架animate
            animate(uls,{

                "marginLeft":-480

            },function(){
   
   //left:图片切换
                //把第一张图片添加到最后
                uls.appendChild(uls.firstElementChild);
				
				//退回来
                uls.style.marginLeft = 0;

            })

        }else{
   
   //right:图片切换
            uls.style.marginLeft = "-480px";
        
		//把最后一张图片添加到前面
			uls.insertBefore(uls.lastElementChild,lis[0]);
            animate(uls,{
                "marginLeft":0
            })
        }
    }
}
	</script>
	</body>
</html>