您好,登錄后才能下訂單哦!
今天給大家介紹下怎么用 JS 實現(xiàn)圖片輪播效果。
原理描述:
使用JS實現(xiàn)輪播的原理是這樣的:
假設初始的情況,下圖一個網(wǎng)格代表一個圖,初始時,顯示1 :
當進行一次輪播后,顯示變?yōu)橄聢D 顯示2:
依次類推。
代碼實現(xiàn):
1 JS 代碼:
<script type="text/javascript"> window.οnlοad=function(){ //獲得ul的元素 var imgList=document.getElementById("imgList"); //獲得圖片的數(shù)組 var imgArr=document.getElementsByTagName("img"); var navId=document.getElementById("navId"); var outer=document.getElementById("outer"); imgList.style.width=520*imgArr.length+"px"; //設置navId的位置 使其居中 navId.style.left=(outer.offsetWidth-navId.offsetWidth)/2+"px"; //得到所有的a 標簽 如果有其他的A的話 這里需要注意要使用navId子元素的a var allA=document.getElementsByTagName("a"); var index=0; allA[index].style.backgroundColor='black';//設置默認的a為黑色 for(var i=0;i<allA.length;i++){ allA[i].num=i; //alert(allA[i].num); allA[i].οnclick=function(){ clearInterval(timer); index=this.num; /* imgList.style.left= -520*index+"px"; */ setA(); move(imgList,"left",-520*index,50,function(){ autoChange(); }); }; } function setA(){ //alert(index); //當indcx值比圖片的數(shù)目多的時候 就歸0 if(index>=imgArr.length-1){ index=0; imgList.style.left=0; } for(var i=0;i<allA.length;i++){ //去掉未點擊的顏色 仍然保留a : hover有用 allA[i].style.backgroundColor=""; } allA[index].style.backgroundColor="black"; } var timer; function autoChange(){ timer=setInterval(function(){ index++; index%=imgArr.length; move(imgList,"left",-520*index,20,function(){ setA(); }); },2000); } autoChange(); //可以根據(jù) target 參數(shù)進行判斷 向哪個方向移動 function move(obj,attr,target,speed,callback){ var current=parseInt(getStyle(obj,attr)); //alert(current); //根據(jù)目標的位置來判定 speed的值是正是負 if(current>target){ speed=-speed; } //自定義對象定時器 防止對象之間的混亂操作 clearInterval(obj.timer); //alert(oldValue); obj.timer=setInterval(function(){ var oldValue=parseInt(getStyle(obj,attr)); var newVal=oldValue+speed; //如果移動的越界 進行重置 if((speed<0 && newVal<=target) || (speed>0 && newVal>=target)){ newVal=target; } obj.style[attr]=newVal+"px"; if(newVal==target){ clearInterval(obj.timer); callback && callback();//回掉函數(shù) 先判斷 有就執(zhí)行 沒有不執(zhí)行 } },30); } //obj:獲取樣式元素 //name:獲取樣式名 function getStyle(obj,name){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[name]; }else{ return obj.currentStyle[name]; } } } </script>
2 HTML 代碼:
<div id="outer"> <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/1.jpg"></li><!-- 增加這個為了實現(xiàn)輪播無縫切換 --> </ul> <div id="navId"> <a href="javascript:0" ></a> <a href="javascript:0" ></a> <a href="javascript:0" ></a> </div> </div>
3 CSS代碼:
<style type="text/css"> *{ margin:0px; padding:0px; } #outer{ width:520px; height:500px; margin:50px auto; background-color:greenyellow; padding:10px 0; /* 開啟相對定位*/ position:relative; overflow:hidden;/* 將超出的部分隱藏 */ /* border:3px solid greenyellow */ } #imgList{ /*去除li的點*/ list-style:none; /*開啟絕對定位 */ position:absolute; /*設置ul的寬度*/ /* width:1560px; */ } #imgList li{ /*為圖片設置浮動*/ float:left; margin:0 10px;/*設置左右外邊距*/ } #navId{ /* 開啟絕對定位 */ position:absolute; /*設置位置*/ bottom:15px; /*設置該塊的左偏移量,使其可以居中 由于outer 寬 520 每個鏈接寬15+2*5=25 目前共三張圖,則共寬75*/ /* left:212px; */ } #navId a{ width:15px; height:15px; float:left;/* 設置超鏈接浮動 */ margin:0 5px; background-color:red; opacity:0.5; /*兼容 IE8 設置透明度*/ filter:alpha(opacity=50); } /*設置鼠標移入效果*/ #navId a:hover{ background-color:black; } </style>
4 實現(xiàn)效果:
更多關于輪播圖效果的專題,請點擊下方鏈接查看學習
javascript圖片輪播效果匯總
jquery圖片輪播效果匯總
Bootstrap輪播特效匯總
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。