主要css代碼：

.w-slider{
 width: 310px;
 height: 265px;
 background-color: pink;
 margin: 100px auto;
 position: relative;
 overflow: hidden;
}
.slider{
 width: 310px;
 height: 220px;
}
.slider-main{
 width: 620px; /* 兩個(gè)圖片的寬度 */
 height: 310px;
}
.slider-main img{
 vertical-align: top; /* 消除圖片上下3px的間隙 */
}
.slider-main-img{
 position: absolute;
 top: 0;
 left: 0;
}
.slider-ctrl{
 text-align:center;
 padding-top: 8px;
}
.slider-ctrl-con{
 display: inline-block;
 width: 24px;
 height: 20px;
 background-color: blue;
 margin: 0 5px;
 background: url(../images/icon.png) no-repeat -24px -782px;
 cursor: pointer;
 text-indent: -20em; /* 為了將span的標(biāo)號(hào)隱藏掉 */
 overflow: hidden;
}
.slider-ctrl .current{
 background-position: -24px -762px;
}
.slider-ctrl-prev,.slider-ctrl-next{
 position: absolute;
 top: 50%;
 margin-top: -35px;
 display: inline-block;
 width: 30px;
 height: 35px;
 background: url(../images/icon.png) no-repeat 6px top;
 opacity: 0.8;
 cursor: pointer;
}
.slider-ctrl-prev{
 left: 0;
}
.slider-ctrl-next{
 right: 0;
 background-position: -6px -44px;
}

主要js代碼（slider.js）：

window.onload = function(){
 function $(id){ return document.getElementById(id);}
 var js_slider = $("js_slider");
 var slider_main = $("slider_main"); //獲取輪播圖片的父盒子
 var imgs = slider_main.children; //得到圖片組
 var slider_ctrl = $("slider_ctrl"); //獲取控制的 父盒子

 //生成控制輪播的span
 for(var i = 0; i< imgs.length; i++){
 var span = document.createElement("span");
 span.className = "slider-ctrl-con";
 span.innerHTML = imgs.length - i;
 slider_ctrl.insertBefore(span,slider_ctrl.children[1]);
 }
 var spans = slider_ctrl.children;
 spans[1].setAttribute("class","slider-ctrl-con current"); //設(shè)置第一個(gè)span增加current樣式

 //布局圖片，第一張?jiān)谡_位置，其余的在右邊
 var scrollWidth = js_slider.clientWidth; //獲取大盒子的寬度，也就是后面動(dòng)畫走的距離
 for(var i=1; i 310px）
  animate(imgs[iNow],{left: scrollWidth});
  iNow = --iNow < 0 ? imgs.length-1 : iNow;
  imgs[iNow].style.left = -scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁(yè)立馬走到左邊，然后顯示
  animate(imgs[iNow],{left:0}); //下一張圖片右移，從-310px->0
  setSquare();
  }else if(this.className == "slider-ctrl-next"){

  //當(dāng)前圖片左移（從0 -> -310px）
  animate(imgs[iNow],{left: -scrollWidth});
  iNow = (++iNow) % imgs.length;
  imgs[iNow].style.left = scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁(yè)立馬走到右邊，然后左移顯示
  animate(imgs[iNow],{left:0}); //下一張圖片左移，從310px->0
  setSquare();
  //或者精簡(jiǎn)為函數(shù)
  /*autoPlay();*/
  }else{
  /*alert("點(diǎn)擊了下面的span");*/
  var clickIndex = this.innerHTML - 1;
  if(clickIndex > iNow){
   //做法等同于右側(cè)按鈕
   animate(imgs[iNow],{left: -scrollWidth});
   imgs[clickIndex].style.left = scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁(yè)立馬走到右邊，然后左移顯示
  }else if(clickIndex < iNow){
   //做法等同于左側(cè)
   animate(imgs[iNow],{left: scrollWidth});
   imgs[clickIndex].style.left = -scrollWidth + "px";//快速執(zhí)行，即將顯示的一頁(yè)立馬走到左邊，然后顯示
  }
  iNow = clickIndex;
  animate(imgs[iNow],{left:0}); 
  setSquare();
  }
 }
 }
 //控制span小方塊的樣式 函數(shù)
 function setSquare(){
 //下面的span樣式清空，將iNow設(shè)置為current，注意是下面的span，不包含左右控制按鈕
 for(var i=1; i0
 setSquare();
 }

 //清除定時(shí)器
 js_slider.onmouseover = function(){
 clearInterval(timer);
 }
 //開(kāi)啟定時(shí)器
 js_slider.onmouseout = function(){
 clearInterval(timer); //要執(zhí)行定時(shí)器，先清除定時(shí)器
 timer = setInterval(autoPlay,2000);
 }
}

緩動(dòng)動(dòng)畫js代碼：（animate.js）

//返回當(dāng)前樣式
function getStyle(obj,attr){ //obj對(duì)象，attr屬性名
 if(obj.currentStyle){ //ie等
 return obj.currentStyle[attr];
 }else{ //w3c
 return window.getComputedStyle(obj,null)[attr];
 }
}
 function animate(obj,json,fn) { // 給誰(shuí) json
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
  var flag = true; // 用來(lái)判斷是否停止定時(shí)器 一定寫到遍歷的外面
  for(var attr in json){ // attr 屬性 json[attr] 值
  //開(kāi)始遍歷 json
  // 計(jì)算步長(zhǎng) 用 target 位置 減去當(dāng)前的位置 除以 10
  // console.log(attr);
  var current = 0;
  if(attr == "opacity")
  {
   current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; //用戶沒(méi)有定義opacity，則返回undefined
   console.log(current);
  }
  else
  {
   current = parseInt(getStyle(obj,attr)); // 數(shù)值，去除樣式的 “px”
  }
  // console.log(current);
   // 目標(biāo)位置就是 屬性值
  var step = ( json[attr] - current) / 10; // 步長(zhǎng) 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
  step = step > 0 ? Math.ceil(step) : Math.floor(step);
  //判斷透明度
  if(attr == "opacity") // 判斷用戶有沒(méi)有輸入 opacity
  {
   if("opacity" in obj.style) // 判斷 我們?yōu)g覽器是否支持opacity
   {
    // obj.style.opacity，//支持opacity-----opacity:0.3
    obj.style.opacity = (current + step) /100; 
   }
   else
   { // obj.style.filter = alpha(opacity = 30)
    obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

   }
  }
  else if(attr == "zIndex")
  {
   obj.style.zIndex = json[attr];
  }
  else
  {
   obj.style[attr] = current + step + "px" ;
  }

  if(current != json[attr]) // 只要其中一個(gè)不滿足條件 就不應(yīng)該停止定時(shí)器 這句一定遍歷里面
  {
   flag = false;
  }
  }
  if(flag) // 用于判斷定時(shí)器的條件
  {
  clearInterval(obj.timer);
  //alert("ok了");
  if(fn) // 很簡(jiǎn)單 當(dāng)定時(shí)器停止了。 動(dòng)畫就結(jié)束了 如果有回調(diào)，就應(yīng)該執(zhí)行回調(diào)
  {
   fn(); // 函數(shù)名 + （） 調(diào)用函數(shù) 執(zhí)行函數(shù) 暫且這樣替代
  }
  }
 },30)
 }

看完了這篇文章，相信你對(duì)“js如何實(shí)現(xiàn)炫酷的左右輪播圖”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！