利用js实现轮播图小案例

具体思路如下：要得到图片滑动效果 就意味着几张图片并排摆放，为方便实现我在无序列表中添加图片，再将其旋转至水平，图片再转正，调整好长度宽度。再设置绝对定位就得到了一组并排的图片。接下来只需每隔一段时间修改ul的left的值，就能实现轮播滑动效果。滑动的速度是根据起点到目标点的位置进行动态调整。距离目标位置越近，速度越慢，越远速度越快。核心代码如下：

function move(obj,ita,attr){
 obj.timer = null;
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var cur = parseInt(getstyle(obj,attr));
 var speed = (ita-cur)/6;
 speed = speed>0?Math.ceil(speed):Math.floor(speed);
 
  if(ita==cur){
   
   clearInterval(obj.timer);
     }else{
     obj.style[attr] = speed+cur+'px';
  }
 },30);
ul{
    position: absolute;
    margin: 0 auto;
    list-style-type: none;
   }
   ul li{
    width: 600px;
    height: 600px;
    }
   ul li img{
    width: 600px;
    height: 400px;
    z-index: 0;
   
    transform:rotate(-90deg);
   }
   .btn {
    width: 60px;
    height: 50px;
    position: absolute;
    z-index: 3;
   }
   .btn img{
    width: 60px;
    height: 50px;
    opacity: 0.3;
   }
   .btn img:hover{
    opacity: 1;
   }
window.onload =function(){
    var aBTN = document.getElementsByClassName('btn');
    aBTN[0].style.top = '140px';
    aBTN[1].style.top = '140px';
    aBTN[1].style.left = '540px';
    var aIMG = document.getElementsByTagName('ul');
    var nr = document.getElementById('nr');
    now = 0;
    function tab(){
     ++now;
     if(now>2){
      now=0;
     }
     move(aIMG[0],480-600*now,'left');
    }
    //setInterval(tab,2000);自动滚动
    aBTN[0].onclick = function(){
     --now;
     alert("当前"+now);
     if(now<0){
      now=2;
     }
     move(aIMG[0],480-600*now,'left');
    }//点击展示前一个
    aBTN[1].onclick = function(){
     
     ++now;alert("当前"+now);
     if(now>2){
      now=0;
     }
     move(aIMG[0],480-600*now,'left');
    }//点击展示后一个
   }
   <div id="nr" style="position: relative;margin: 0 auto;width: 600px;height: 400px;overflow: hidden;">
  <div class="btn">
   <img src="../img/箭头左.jpg" />
  </div> 
  <div class="btn">
   <img src="../img/箭头右.jpeg">
  </div>
  <ul style="transform:rotate(90deg);top: -800px;left: 480px;">
  <li ><img  src="../img/年.jpg"></li>
  <li ><img src="../img/银装素裹.jpg"></li>
  <li ><img  src="../img/青城山.jpg"></li>
  </ul>
  </div>