1、简单版本（无循环轮播，同时展示多张图片）

https://juejin.im/post/6844903799115497479

2、复杂版本（循环、自动轮播，同时展示一张图片）

效果图

在这里插入图片描述

源代码

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>滑动轮播案例</title>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
  <link href="lunbo2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
  <div id="show-area">
    <ul>
      <!--<li><a href="#"><img style="width: 100%;height: 100%" src="imges/img1.jpg"></a></li>-->
      <!--<li><a href="#"><img style="width: 100%;height: 100%" src="imges/img2.jpg"></a></li>-->
      <!--<li><a href="#"><img style="width: 100%;height: 100%" src="imges/img3.jpg"></a></li>-->
      <!--<li><a href="#"><img style="width: 100%;height: 100%" src="imges/img4.jpg"></a></li>-->
      <li>img1</li>
      <li>img2</li>
      <li>img3</li>
      <li>img4</li>
    </ul>
    <div id="button-left"><</div>
    <div id="button-right">></div>
    <div id="indicator"></div><!--控制按钮,为了日后方便后台操作这里的控制按钮在js代码中控制添加-->
  </div>
</div>
<script src="lunbo2.js"></script>
</body>
</html>

css

*{ 
    padding:0px;
    margin:0px;
    border:0px;
}
li{ 
    list-style-type:none;
}
/*给a标签去除下划线*/
a{ 
    text-decoration:none;
}
#wrapper{ 
    margin:20px auto;
}
#show-area{ /*宽度在js代码中设置的*/
    height:500px;
    position:relative;
    margin:0px auto;
    overflow:hidden;
}
/*注意：找bug找了很久，这里自动插入一张，父容器要加上他的宽度(在js代码中动态计算了)，否则怎么显示呢？小问题大解决*/
#show-area ul{ 
    position:relative;
    right:0;
}
#show-area ul li{ /*宽度在js代码中设置的*/
    float:left;
    height:500px;
    text-align: center;
    line-height: 500px;
}
#show-area ul li:nth-of-type(1){ 
    background-color: #4c3da8;
}
#show-area ul li:nth-of-type(2){ 
    background-color: #a83c39;
}
#show-area ul li:nth-of-type(3){ 
    background-color: #8da86f;
}
#show-area ul li:nth-of-type(4){ 
    background-color: #1492a8;
}
#show-area ul li:nth-of-type(5){ 
    background-color: #4c3da8;
}
/*指示器*/
#indicator{ 
    display: flex;
    justify-content: space-between;
    width:140px;
    position:absolute;
    top:450px;
    left:0;
    right: 0;
    margin: auto;
    z-index:1;
}
#indicator div{ 
    height:12px;
    width:12px;
    border-radius:12px;
    background-color:#ccc;
    float:left;
    margin-left:5px;
    opacity:0.9;
    filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
    transition: all .8s;
}
#button-left,#button-right{ 
    position: absolute;
    width: 50px;
    height: 110px;
    z-index: 2;
    background-color: #cccccc;
    font-size: 40px;
    color: #FFFFFF;
    text-align: center;
    line-height: 110px;
    opacity:0;
    filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
    cursor: default;
}
#button-left{ 
    top: 180px;
    left: 0px;
}
#button-right{ 
    top: 180px;
    right: 0px;
}
.onclick{ 
    width: 30px !important;
    background-color:#FFF !important;
}

$(function () { 
  $('#show-area').css({ 
    width:window.screen.width
  })
  $('#show-area ul li').css({ 
    width:window.screen.width
  })
  /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
  $("#show-area").mouseenter(function () { 
    $("#button-right,#button-left").css({ opacity:0.5,transition:'all .5s'});
  });
  $("#show-area").mouseleave(function () { 
    $("#button-right,#button-left").css({ opacity:0,transition:'all .5s'});
  });
  var i=0;
  /*假装自己很智能，自动获取一下，在后面left值移动时就可以用它了*/
  var imgWidth = $("#show-area ul li").width();
  var clone = $("#show-area ul li").first().clone(true);
  /*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/
  $("#show-area ul").append(clone);
  /*get 所有li的个数,只有length才是属性*/
  var size = $("#show-area ul li").length;
  $('#show-area ul').css({ 
    width:imgWidth*size
  })
  /*step 1: */
  //一开始循环添加按钮
  //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
  //所以添加按钮的时候我们也应该添加4个按钮
  for(var j=0;j<size -1 ;j++){ 
    $("#indicator").append("<div></div>");
  }
  $("#indicator div").eq(i).addClass("onclick");
  /*step 2: */
  //左按钮
  $("#button-left").click(function () { 
    toLeft();
  });
  //右按钮
  $("#button-right").click(function () { 
    toRight();
  });
  /*step 3：*/
  //按钮指示器鼠标移出移入事件
  $("#indicator div").hover(function () { 
    i = $(this).index();
    clearInterval(timer);
    $("#show-area ul").stop().animate({ left:-i * imgWidth});
    $(this).addClass("onclick").siblings().removeClass("onclick");
  },function () { 
    timer = setInterval(function () { 
      toRight();
    },2000)
  });
  //两个方向按钮鼠标移出移入事件
  $("#button-left,#button-right").mouseenter(function () { 
    clearInterval(timer);
  }).mouseleave(function () { 
    timer = setInterval(function () { 
      toRight();
    },2000);
  });
  //定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。
  var timer = setInterval(function () { 
    toRight();
  },2000);
  /*step 2-2*/
  //左按钮实现的函数
  function toLeft(){ 
    //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
    i--;
    if(i==-1){ 
      $("#show-area ul").css({ left:-(size - 1)*imgWidth});
      i=size-2;
    }
    $("#show-area ul").animate({ left:-i*imgWidth},1000);
    $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
  }
  /*step2-2:*/
  //右按钮的实现函数
  function toRight() { 
    i++;
    /*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片） 并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置 并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/
    if(i==size){ 
      $("#show-area ul").css({ left:0});
      i=1;
    }
    $("#show-area ul").stop().animate({ left: -i * imgWidth}, 1000);
    //设置下面指示器的颜色索引
    if(i == size-1){ 
      $("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick");
    }else{ 
      $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
    }
  }
});