JavaScript實現(xiàn)圖片輪播特效

更新時間：2019年10月23日 10:06:35 作者：qq_29750461

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)圖片輪播特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天給大家介紹下怎么用 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)效果：