制作一个含文字和图片的轮播图

非原生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 templatesh1>
                                <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">TMONEh1>
                                <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 - TemplateMonsterh1>
                                <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 Bundleh1>
                                <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 Hostingh1>
                                <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();
    })

}

以上就是制作一个轮播图的所有代码，错误之处，请留言指正，谢谢