非原生JS制作轮播图
有一定的参考价值，但是不能保证不出错，还请大佬门自己多多尝试
实现3个功能：
1.自动轮播
2.鼠标放上去停止轮播
3.鼠标放在小圆点上实现轮播
原理
一个盒子（div）放置图片和文字，多个盒子重叠，利用CSS布局显示一个盒子、其余盒子隐藏。通过不断切换隐藏和显示的盒子实现轮播，也可以手动直接切换。
HTML样式
<div class="coursel slide" id="myCaroursel">
<ol class="carousel-indicators">
<li data-target="#myCaroursel" data-slide="0" class="point active"></li>
<li data-target="#myCaroursel" data-slide="1" class="point"></li>
<li data-target="#myCaroursel" data-slide="2" class="point"></li>
<li data-target="#myCaroursel" data-slide="3" class="point"></li>
<li data-target="#myCaroursel" data-slide="4" class="point"></li>
</ol>
</div>
<div class="all" id="box">
<div class="inner">
<ul>
<li class="item active">
<div class="container">
<a href="#">
<div class="col-xs-12 col-xm-6 col-md-6">
<h1 class="white-text">Download hundreds of free and premium bootstrap themes and templates</h1>
<h2 class="white-text">Responsive, open-source templates & themes for Bootstrap 3 & Bootstrap 4. Download a free theme to kickstart your Bootstrap website.</h2>
</div>
<div class="col-md-6">
<img src="1.png" style="max-height:243px !important">
</div>
</a>
</div>
</li>
<li class="item" style="width: 100%">
<div class="container">
<a href="#">
<div class="col-md-6">
<img src="2.jpg" style="max-height:243px !important">
</div>
<div class="col-xs-12 col-xm-6 col-md-6">
<h1 class="white-text">TMONE</h1>
<h2 class="white-text">The ONE Subscription to Get Everything for Building Websites 0 + items The first service to include a full product range from extensions to templates and graphics Browse items View plan Features the Top Products Enjoy top-notch
items included in the ONE subscription service ..</h2>
</div>
</a>
</div>
</li>
<li class="item">
<div class="container">
<a href="#">
<div class="col-md-6">
<img src="3.jpg" style="max-height:135px !important">
</div>
<div class="col-xs-12 col-xm-6 col-md-6">
<h1 class="white-text">Ready to Use - TemplateMonster</h1>
<h2 class="white-text">Let TemplateMonster Build a Website For You! Get yourself a ready-made website for a flat price! Ready to Use website - the best way to start your business online..</h2>
</div>
</a>
</div>
</li>
<li class="item">
<div class="container">
<a href="#">
<div class="col-md-6">
<img src="4.jpg" style="max-height:243px !important">
</div>
<div class="col-xs-12 col-xm-6 col-md-6">
<h1 class="white-text">December 2018 Big Bundle</h1>
<h2 class="white-text">Creative Tim - December Big Bundle Looking to purchasing all the Creative Tim products? Buy Big Bundle and save up to 90%. </br> <b>Exclusive 15% off coupon: BSZ-CTBigBundle2018 </b> </br>
</br> The December Big Bundle includes: Material Dashboard Pro Angular, Material Dashb..</h2>
</div>
</a>
</div>
</li>
<li class="item">
<div class="container">
<a href="#">
<div class="col-md-6 col-x">
<img src="5.jpg" style="max-height:243px !important">
</div>
<div class="col-xs-12 col-xm-6 col-md-6">
<h1 class="white-text">InMotion Hosting</h1>
<h2 class="white-text">Looking for a reliable and affordable hosting provider for your next bootstrap project? Meet InMotion Hosting! InMotion Hosting is a top rated U.S. based web hosting company offering Shared Hosting, Reseller Hosting, VPS
Hosting and Dedicated Servers. Exclusive pricing start..</h2>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
这些就是一些文字和图片的 编排，有部分bootstrap元素
CSS样式
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style> *{ margin:0; padding:0; } .white-text { color: #fff !important; } .item { display: none; height: 100%; width: 100%; background: #9c27b0; position: absolute; top: 30px; } .all { height: 245px; } .active { display: inline; } .carousel-indicators { position: relative; top: 230px; } h1 { font-size: 2em; font-weight: 200; } h2 { font-size: 1.25em; } </style>
我写的CSS样式比较简单，不是很复杂，因为在HTML中就包含了一些CSS，而且引入了bootstrap。
JS部分
var item = document.getElementsByClassName("item");
var point = document.getElementsByClassName("point");
var index = 0;
var cleanActive = function() {
for (let i = 0; i < item.length; i++) {
item[i].className = 'item';
}
for (let j = 0; j < point.length; j++) {
point[j].className = 'point;'
}
}
var goIndex = function() {
cleanActive();
point[index].className = 'point active';
item[index].className = 'item active';
}
var goNext = function() {
if (index == 5) {
index = 0;
} else {
index++;
}
goIndex();
}
for (let i = 0; i < point.length; i++) {
point[i].addEventListener("click", function() {
var pointindex = this.getAttribute("data-slide");
index = pointindex;
goIndex();
})
}
以上就是制作一个轮播图的所有代码，错误之处，请留言指正，谢谢
