用js写的旋转木马，在新年献给各位刚登基的皇帝，让你的后宫转起来！程序员就是可以为所欲为！

深藏阁楼爱情的钟 2021-07-24 23:26 270阅读 0赞

**目录**

效果图：

实现的内容：

代码奉上：

实现原理我就不写了，代码注释的比较详细，欢迎指正！！

--------------------

### 效果图： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

### 实现的内容： ###

1.自动向右旋转。

2.点击图片自动把点击的图片旋转到最前面。

3.点击向左向右，分别向左向右旋转。

4.这个样式做的比较简单哈，可以多设置一些样式，看起来更炫酷，模子都有了，加起来就很容易了。

### 代码奉上： ###

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">
            <style>
            *{
            	margin:0;padding:0;
            }
            #div_box{margin:0px auto;position:absolute;left:28%;width:680px;height:530px}
            #div_box div{position:absolute;width:0;height:0;z-index:0;cursor:pointer;overflow:hidden;top:152px; left:10px;}
    		#div_box div img{width:100%;height:100%;vertical-align:top; float:left; border:0;}
    		.left{
    			position:absolute;
    			width: 100px;
    		    height: 100px;
    		    top: 40%;
    		    left: 26%;
    		    opacity:0;
    		}
    		.right{
    			position:absolute;
    			width: 100px;
    		    height: 100px;
    		    top: 40%;
    		    left: 78%;
    		    opacity:0;
    		}
            </style>
            </head>
            <body>
            	<div id="box">
    	       		<div id="div_box" >
    	       		</div>
    	       		<span class='left' id='left' ><img src='../images/2/left.png'></span>
    	       		<span class='right' id='right' ><img src='../images/2/right.png'></span>
           		</div>
            </body>
            
    <script>
    	(function(){
    		var div_box = document.getElementById("div_box");// 获取盒子
    		var box = document.getElementById("box");
    			//外层box设置鼠标移入移出事件
    			box.addEventListener('mouseover',over);
    			box.addEventListener('mouseout',out);
    			
    			//左右按钮设置点击事件
    		var leftSpan = document.getElementById("left");
    			leftSpan.addEventListener('click',toLeft);	
    		var rightSpan = document.getElementById("right");
    			rightSpan.addEventListener('click',toRight);
    					
    		var boxQuene=[];//用来存储图片dom对象的
    	
    		//创建图片
    		var img_num=7,middle_num=(img_num%2==0)?(img_num/2):Math.floor(img_num/2)+1;
    		function init(){
    			for(var i=1;i<=img_num;i++){
    				var div = document.createElement("div");
    					div.id="div_"+i;
    					var borderColor = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
    					div.style.border='3px solid '+borderColor;
    					div.style.borderRadius='8px';
    					div.addEventListener('click',check);
    					
    					//加入图片
    					var img = document.createElement("img");
    						img.src="../images/2/"+i+".jpg";
    						
    						div.appendChild(img);
    					
    					div_box.appendChild(div);
    					
    					boxQuene.push(div);//一个个的推入到盒子队列
    			}
    			//第一次设置卡片样式
    			reset();
    			
    			//定时向右翻
    			autoMove();
    		}
    		
    		var left=0,top=50,c_top,zIndex=0,width=262,height=389,first,last,opacity;
    		//重新设置卡片的样式
    		function reset(){
    			zIndex=0;
    			for(var i=0;i<boxQuene.length;i++){
    				var obj = boxQuene[i];
    					width=262,height=389,c_top=0;
    					//判断是否要放到最后面的
    					if(i<middle_num-2){
    						first=true;
    						last=false;
    					}else if(i>middle_num){
    						first=false;
    						last=true;
    					}else{
    						first=false;
    						last=false;
    					}
    						
    					if(i<middle_num){
    						zIndex++;
    						if(first){//放到最后的
    							left=50;
    							c_top=-30;
    							opacity=0.03
    						}else if(i==middle_num-1){//中间要突出显示的
    							left=190;
    							width+=40;
    							height+=56;
    							c_top=30;
    							opacity=1
    						}else{
    							left=10
    							opacity=0.4
    						}
    					}else{
    						zIndex--;
    						if(last){//放到最后的
    							left =360;
    							c_top=-30;
    							opacity=0.03
    						}else{
    							left =400;
    							opacity=0.4
    						}
    					}
    					
    				 	obj.style.zIndex=zIndex;
    				 	obj.children[0].id=i;
    				 	obj.style.opacity=opacity;
    				 	//使用自己封装的动画函数
    				 	(function(o){
    				 		var o_width=width+'px',o_height=height+'px',o_left=left+'px',o_top=top+c_top+'px',index=i;
    				 		var param = {'width': o_width,'height': o_height,'left': o_left,'top': o_top};
    				 		animate(o,param,'fast');
    				 	})(obj);
    				 	
    			}
    		}
    		//选中图片事件函数
    		function check(e){
    			var e = e || window.event;
    			var target = e.target || e.srcElement;
    			if(target.id){
    				//找到当前点击的目标
    				var cur = boxQuene.filter(function(item){
    					return target.id==item.children[0].id;
    				})
    				
    				var curIndex = parseInt(/\d+/.exec(cur[0].children[0].id)[0]);
    				if(curIndex===middle_num-1){
    					return;
    				}else{
    					moveQuene(curIndex);
    				}
    				
    				reset();
    			}
    		}
    		//鼠标移入
    		function over(){
    			leftSpan.style.opacity=1;
    			rightSpan.style.opacity=1;
    			clearInterval(timmer);
    		}
    		//鼠标移出
    		function out(){
    			leftSpan.style.opacity=0;
    			rightSpan.style.opacity=0;
    			autoMove();
    		}
    		//移动队列
    		function moveQuene(curIndex){
    			 var step = middle_num-1-curIndex;
    			 if(step>0){
    			 	while(step>0){
    			 		//取到队列最后一个元素，插入到最前面
    			 		boxQuene.unshift(boxQuene.pop());
    			 		step--;
    			 	}
    			 }else{
    			 	step = Math.abs(step);
    			 	while(step>0){
    			 		//取到队列第一个元素，插入到最后面
    			 		boxQuene.push(boxQuene.shift());
    			 		step--;
    			 	}
    			 }
    		}
    		
    		//获取属性值
    		function getStyle(obj, prop) {
    			var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;
    			return prevComputedStyle[prop];
    		}
    		
    		/*
    		obj:dom对象
    		prop:动画参数
    		speed:执行速度 fast slow 3000等
    		func:回调函数
    		*/
    	   function animate(obj,prop,speed,func){
    			//防止重复动画事件
    			if(obj.timer) return ;
    			//定义定时器执行次数和总执行时间
    			var	limit=20,totalTime; 
    			if(typeof speed==='number'){//如果传入的是
    				totalTime = speed;
    			}else if(speed==='slow'){
    				totalTime = 600;
    			}else if(speed==='fast'){
    				totalTime = 200;
    			}else{
    				totalTime = 400;
    			}
    			
    			var time = totalTime/limit;
    		 
    			var n=0,cache={},display,primary_cur;//cache用来缓存，省的每次都去dom获取
    			obj.timer = setInterval(function(){
    				n++;//执行次数每次递增
    				for(var p in prop){
    					if("display"===p) {
    						display = prop["display"];
    						if(display!=='none'){
    							obj.style['display'] = display;
    						}
    						delete prop["display"];
    						continue;
    					}
    					//判断是否是可以递增的属性，如果不是则直接让它生效，并从prop中删除，删除后就不用每次任务都执行它
    					var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性
    					if(!reg.test(prop[p])){
    						obj.style[p] = prop[p];
    						delete prop[p];
    						continue;
    					}
    					
    					var value,opacityFlag=(p == "opacity")?true:false;
    					var cur = 0;
    					if(cache[p+"_cur"]){//从缓存中取
    						cur = cache[p+"_cur"];
    						value = cache[p+"_value"];
    					}else{
    						value = prop[p];
    						if(opacityFlag) {
    							//如果本来是隐藏的则cur默认就是0
    							if(getStyle(obj, 'display')!=='none'){
    								cur = Math.round(parseFloat(getStyle(obj, p)) * 100);
    							}
    						} else {
    							cur = parseInt(getStyle(obj, p));
    							//处理100px的格式
    							(typeof value==='string') && (value=value.replace(/px$/,""));
    						}
    						primary_cur=cur;
    						cache[p+"_value"] = value;
    					}
    					
    					var incre ;
    					if(cache[p+'_increment']){//如果缓存中有则从中取
    						incre = cache[p+'_increment'];
    					}else{
    						if(opacityFlag){
    							incre = (value*100-cur)/limit;//计算每次变化值
    						}else{
    							incre = (value-cur)/limit;//计算每次变化值
    						}
    						cache[p+'_increment']= incre;
    					}
    					//缓存起来，这样就不用每次都去dom中获取了。
    					cache[p+"_cur"] = cur + incre;
    					
    					if (opacityFlag) {
    						obj.style.filter = "alpha(opacity:"+(cur + incre)+" )";
    						obj.style.opacity = (cur + incre)/100 ;
    					}else {
    						obj.style[p] = cur + incre + "px";
    					}
    				}
    				//如果达到了最大执行次数，要清除定时器，并执行回调函数
    				if(n==limit){
    					if(display==='none'){
    						obj.style['display'] = 'none';
    					}
    					//清除定时器
    					clearInterval(obj.timer);
    					obj.timer=undefined;
    					func && func();
    				}
    			},time)
    		}
    	 
    		var _ = {
    			isFunction : function(o){
    				return o!== null &&typeof o ==='function';
    			}
    		}
    		//
     		function toLeft(){
     			//将队列的第一个元素放到最后面
     			boxQuene.push(boxQuene.shift());
     			reset();
     		}
     		
     		function toRight(){
     			//将队列的最后一个元素放到最前面
     			boxQuene.unshift(boxQuene.pop());
     			reset();
     		}
     		
     		var timmer;
     		//自动向右定时器
     		function autoMove(){
     			timmer = setInterval(function(){
     				//往右翻
     				boxQuene.unshift(boxQuene.pop());
     				reset();
     			},3000);
     		}
    		//初始化
    		init();
    		
    	})()
     
    </script>
    </html>

### 实现原理我就不写了，代码注释的比较详细，欢迎指正！ 给个三连哈，谢谢！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/b9bc187e2b8643cea3c3ef9770e4f5fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/f1f9c3024031433a8a35fbdcfc9b16f0.png