用js寫的輪播圖，八位女明星，你翻誰的牌！

人生行者發表於2020-12-31

今天下午利用摸魚的時間做了一個圖片輪播，嘿嘿，先看看效果，本來想搞動態圖的，整出來效果不好，圖片又超過了5M不讓傳，還是截圖吧

感覺需

實現的功能：

1.定時向右滾動。

2.點選明星切換到最中間。

3.滑鼠移入定時器被清除、滑鼠移開定時器再次載入。

要改進的地方：

1.引數img_num 即總圖片的數量必須是大於等於5，小於5的話會有空隙。
2.圖片目前設定的寬 262px 高389px 如果尺寸的比例不符合的話效果沒那麼好。

實現思路：

1.先初始化幾張圖片（用div，然後div加入img），並將這些div儲存到一個array中作為佇列。

2.封裝一個reset函式（包含自己先前寫的動畫函式），專門用來對這些圖片設定樣式，根據他們的位置設定不同的left top 寬度高度等。

3.當我們點選其中的div時，就同步將他的位置設定到佇列的中間，同時它左右兩邊的同步移動（最前面的那個再往前移動的話就放到佇列的最後，形成迴圈）。

4.佇列設定好以後，呼叫reset 函式就會再次排版。

5.定時往右移動，滑鼠移入清除定時器，移出時再次生成定時器。

完整程式碼

 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{
        	margin:0;padding:0;
        }
        #div_box{width:1100px; margin:0px auto;}
        #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;}
        </style>
        </head>
        <body>
       		<div id="div_box" >
       		</div>
        </body>
        
<script>
	(function(){
		var div_box = document.getElementById("div_box");// 獲取盒子
		var boxQuene=[];//用來儲存圖片dom物件的
	
		//建立圖片
		var img_num=8,middle_num=(img_num%2==0)?(img_num/2):Math.floor(img_num/2)+1;
		function init(){
			var screenWidth = window.screen.availWidth-20;
			var screenHeight = window.screen.availHeight-110;
			div_box.style.width=screenWidth+'px';
			div_box.style.height=screenHeight+'px';
			
			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);
					div.addEventListener('mouseover',over);
					div.addEventListener('mouseout',out);
					
					
					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;
		//重新設定卡片的樣式
		function reset(){
			for(var i=0;i<boxQuene.length;i++){
				var obj = boxQuene[i];
					width=262,height=389,c_top=0;
					
					var step = Math.floor((img_num-5)/2);
					if(i<=step){
						first=true;
						last=false;
					}else if(i>=boxQuene.length-1-step){
						first=false;
						last=true;
					}else{
						first=false;
						last=false;
					}
						
					if(i<middle_num){
						zIndex++;
						if(first){
							left=100;
						}else if(i==middle_num-1){
							left=(i-step) * 250;
							width+=40;
							height+=56;
							c_top=-30;
						}else{
							left=(i-step) * 260;
						}
					}else{
						zIndex--;
						if(last){
							left = screen.availWidth-390;
						}else{
							left=(i-step) * 260;
						}
					}
					
					
					//obj.style.width=width+'px';
					//obj.style.height=height+'px';
				 	//obj.style.left=left+'px';
				 	//obj.style.top=top+c_top+'px';
				 	obj.style.zIndex=zIndex;
				 	obj.children[0].id=i;
				 	
				 	//使用自己封裝的動畫函式
				 	(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,'z-index':zIndex};
				 		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(){
			clearInterval(timmer);
		}
		function out(){
			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';
			}
		}
 
 		var timmer;
 		function autoMove(){
 			timmer = setInterval(function(){
 				//往右翻
 				boxQuene.unshift(boxQuene.pop());
 				reset();
 			},3000);
 		}
		//初始化
		init();
		
	})()
 
</script>
</html>

圖片的話自己整，整理不易給個三連吧！！

JS完結：用JavaScript寫個功能完善的電商輪播圖
2020-10-02
JSJavaScript
js 輪播圖 (原生)
2022-04-16
JS
原生JS實現輪播圖的效果
2018-06-13
JS
js實現輪播圖
2021-01-02
JS
用原生js實現圖片輪播器
2018-03-08
JS
授人以漁式解析原生JS寫輪播圖
2019-03-04
JS
原生js實現輪播圖
2020-10-25
JS
手把手和你用原生JS寫一個迴圈播放圖片輪播
2019-02-16
JS
用原生JS實現圖片輪播切換功能
2018-06-06
JS
用狀態機寫輪播
2018-05-21
jQuery輪播圖之上下輪播
2018-06-30
jQuery
關於輪播圖的技術理解你知道多少
2018-04-16
輪播圖
2020-10-22
微信小程式------輪播圖------縱向輪播圖
2024-05-28
微信小程式
vue輪播圖
2019-02-25
Vue
Flutter輪播圖
2020-07-02
Flutter
淡入淡出的輪播圖元件
2018-06-13
元件
小程式輪播圖應用——技巧篇
2019-01-14
用CSS實現一個輪播圖
2024-12-02
CSS
vue元件之輪播圖的實現
2019-03-21
Vue元件
移動端輪播圖實現方法（dGun.js）
2019-02-16
JS
原生 JS 擼一個輪播圖（支援拖拽切屏）
2019-06-05
JS
JS實現輪播圖效果（有詳細註釋）
2021-01-01
JS
文字輪播與圖片輪播？CSS 不在話下
2022-06-07
CSS
原生JS實現輪播圖--第一章圖片展示
2018-09-02
JS
不到200行用Vue實現類似Swiper.js的輪播元件
2024-04-23
VueJS元件
無縫輪播圖的一種方式原理
2019-02-16
vue元件之路之輪播圖的實現
2019-03-21
Vue元件
ViewPage實現輪播圖
2018-10-29
View
Banner實現輪播圖
2018-10-29
vue輪播圖外掛
2019-01-10
Vue
圖片輪播--純css
2018-05-15
CSS
面向Vue新人：使用Vue寫一個圖片輪播元件
2018-03-19
Vue元件
flutter好用的輪子推薦三-超強輪播圖Swiper
2019-10-28
Flutter
前端基礎功能，原生js實現輪播圖例項教程
2021-01-21
前端JS
js中用oop思想封裝輪播
2018-07-22
JSOOP封裝
造輪子之圖片輪播元件(swiper)
2019-01-03
元件
使用jQuery實現的平滑滾動輪播圖
2018-08-29
jQuery