轮播图实现

最新推荐文章于 2024-07-23 16:37:55 发布

代code码的搬运工

最新推荐文章于 2024-07-23 16:37:55 发布

阅读量63

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/qq_32426091/article/details/133927803

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin:0px;
			padding: 0px;
		}
		div{
			width: 500px;
			height: 300px;
			background: pink;
			position: relative;
			overflow: hidden;
		}
		div ul{
			width:2500px;
			position:absolute;

		}
        div ul li{
            float: left;    
        }
        img{
        	width:500px;
        	height: 300px;
        }
	</style>
	<script type="text/javascript">
       function annimate(obj,target,interval,callback){
       	   if(!obj.hasOwnProperty('flag')){
              obj.flag = true;
       	   }
       	  if(obj.flag){
       	  	  obj.flag = false;
       	  	  obj.timer = setInterval(function(){    	
              var step = (target - obj.offsetLeft)/10;
              step = step > 0 ? Math.ceil(step) : Math.floor(step);
              if(Math.abs(target) - Math.abs(obj.offsetLeft) <= 0 ){
                   if(callback){
                   	console.log("执行回调函数");
                   	callback()
                   } 
                   clearInterval(obj.timer);
                   obj.flag = true;
              }
              obj.style.left =  obj.offsetLeft + step + "px";              
          },interval);
       	  }
       }
     window.addEventListener("load",function(){
		     var div = document.querySelector("div");
             var ul = document.querySelector("ul");
             var picNum = ul.children.length;
             var playNum = 1;  
             setInterval(function(){
             	var target = -(playNum)*500;
             	annimate(ul,target,20,function(){
		         playNum ++;
		         if(playNum === 4 && ul.children.length === 4){
		         	var li = document.createElement("li");
		         	li.innerHTML = "<img src=\"a.png\">";
		         	ul.appendChild(li);
		         }
                 if(playNum === 5){
                 	ul.style.left = 0;
                 	playNum = 1;
                 }
		     });
             },1000);      
     })
	</script>
</head>
<body>
	<div>
			<ul>
				<li><img src="a.png"></li>
				<li><img src="b.png"></li>
				<li><img src="c.png"></li>
				<li><img src="d.png"></li>
			</ul>
	</div>

</body>
</html>