思路：
1、首先要有个盛放图片的容器，设置为单幅图片的宽高，且overflow：hidden，这样保证每次可以只显示一个图片
2、container内有个放图片的list进行position的定位 ，其中的图片采用float的方式，同时当图片进行轮播时，改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器，通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时，清除定时器，图片停止轮播，当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应，同时可以通过点击的方式查看对应的图片
6、图片可以通过点击pre,next进行左右滑动显示
代码：
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>轮播图</title>
???<style type="text/css">
???????.container{
???????????margin:0 auto;
???????????width:600px;
???????????height:400px;
???????????position: relative;
???????????overflow: hidden;
???????????border:4px solid gray;
???????????box-shadow: 3px 3px 5px gray;
???????????border-radius:10px;
???????}
???????.list{
???????????width:4200px;
???????????height:400px;
???????????position: absolute;
???????????top:0px;
???????}
???????img{
???????????float:left;
???????????width:600px;
???????????height:400px;
???????}
?????.dots{
?????????position: absolute;
?????????left:40%;
?????????bottom:30px;
?????????list-style: none;
??????}
???????.dots li{
???????????float:left;
???????????width:8px;
???????????height:8px;
???????????border-radius: 50%;
???????????background: gray;
???????????margin-left:5px
???????}
???????.dots .active{
???????????background: white;
???????}
???????.pre,.next{
???????????position: absolute;
???????????top:40%;
???????????font-size:40px;
???????????color:white;
???????????text-align:center;
???????????background: rgba(128,128,128,0.5);
???????????display:none;
???????}
???????.pre{
???????????left:30px;
???????}
???????.next{
???????????right:30px;
???????}
???</style>
</head>
<body>
??<div class="container">
??????<div class="list" style=" left:-600px;">
??????????<img src="img/5.jpg">
??????????<img src="img/1.jpg">
??????????<img src="img/2.jpg">
??????????<img src="img/3.jpg">
??????????<img src="img/4.jpg">
??????????<img src="img/5.jpg">
??????????<img src="img/1.jpg">
??????</div>
??????<ul class="dots">
??????????<li index=1 class="active dot"></li>
??????????<li index=2 class="dot"></li>
??????????<li index=3 class="dot"></li>
??????????<li index=4 class="dot"></li>
??????????<li index=5 class="dot"></li>
??????</ul>
??????<div class="pre"><</div>
??????<div class="next">></div>
??</div>
<script type="text/javascript">
???var index=1,timer;
???window.onload = init;
?/*初始化函数*/
???function init(){
???????eventBind();
???????autoPlay();
???}
???/*自动轮播*/
???function autoPlay(){
????????timer =setInterval(function () {
???????????animation(-600);
???????????dotIndex(true);
???????},1000)
???}
???/*停止轮播*/
???function stopAutoPlay() {
???????clearInterval(timer);
???}
???/*改变dot的显示*/
???function dotIndex(add){
???????if(add){
???????????index++;
???????}
??????else{
???????????index--;
???????}
???????if(index>5){
???????????index = 1;
???????}
???????if(index<1){
??????????index = 5;
???????}
???????dotActive();
???}
??function dotActive() {
??????var dots = document.getElementsByClassName("dot");
??????var len = dots.length;
??????for(var i=0 ;i<len ;i++){
??????????dots[i].className = "dot";
??????}
??????for(var i=0;i<len;i++){
??????????/*此处可以不用parseInt，当不用全等时*/
??????????if(index === parseInt(dots[i].getAttribute("index"))){
??????????????dots[i].className = "dot active";
??????????}
??????}
??}
??/*初始化事件绑定*/
???function eventBind(){
???????/*点的点击事件*/
???????var dots = document.getElementsByClassName("dot");
???????var len = dots.length;
???????for(var i=0;i<len;i++){
???????????(function(j){
???????????????dots[j].onclick = function(e){
???????????????????var ind = parseInt(dots[j].getAttribute("index"));
???????????????????animation((index - ind)*(-600));/*显示点击的图片*/
???????????????????index = ind;
???????????????????dotActive();
???????????????}
???????????})(i)
???????}
???????/*容器的hover事件*/
???????var con = document.getElementsByClassName("container")[0];
???????/*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
???????con.onmouseover = function (e) {
???????????stopAutoPlay();
???????????document.getElementsByClassName("pre")[0].style.display = "block";
???????????document.getElementsByClassName("next")[0].style.display = "block";
???????}
???????con.onmouseout =function(e){
???????????autoPlay();
???????????document.getElementsByClassName("pre")[0].style.display = "none";
???????????document.getElementsByClassName("next")[0].style.display = "none";
???????}
???????/*箭头事件的绑定*/
????????var pre = document.getElementsByClassName("pre")[0];
????????var next = document.getElementsByClassName("next")[0];
????????pre.onclick = function (e) {
????????????dotIndex(false);
????????????animation(600);
????????}
???????next.onclick = function (e) {
???????????dotIndex(true);
???????????animation(-600);
???????}
???}
???/*list容器的偏移量是图片轮播*/
???function animation(offset){
???????var lists = document.getElementsByClassName("list")[0];
???????var left = ??parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
???????if(left<-3000){
???????????lists.style.left = "-600px";
???????}
??????else if(left>-600){
???????????lists.style.left = "-3000px";
???????}
?????else{
???????????lists.style.left = left+"px";
???????}
???}
</script>
</body>
</html>
js实现轮播
原文地址：https://www.cnblogs.com/bbqq1314/p/9789145.html