html+js实现图片轮播

首先引用css

@*轮播需用start*@
<link href="~/hom/static/masterslider/style/masterslider.css" rel="stylesheet" />
<link href="~/hom/static/masterslider/skins/default/style.css" rel="stylesheet" />
@*end*@

css代码

  #im {
            width: 38rem;
            height: 25rem;
            margin-bottom: 0px;
            margin-left: 0px;
        }

        /*fytest*/
        /*标题样式*/
        .imgBox {
            /*border-top: 2px solid cadetblue;*/
            width: 38rem;
            height: 25rem;
            margin: 0 auto;
        }
        .img1 {
            display: block;
        }

        .img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9 {
            display: none;
        }

html代码：

<div class="imgBox">
                        <img class="img-slide img1" id="im" src="~/Uploadfiles/Rli/1.jpg" alt="1">
                        <img class="img-slide img2" id="im" src="~/Uploadfiles/Rli/2.jpg" alt="2">
                        <img class="img-slide img3" id="im" src="~/Uploadfiles/Rli/3.jpg" alt="3">
                        <img class="img-slide img4" id="im" src="~/Uploadfiles/Rli/4.jpg" alt="4">
                        <img class="img-slide img5" id="im" src="~/Uploadfiles/Rli/5.jpg" alt="5">
                        <img class="img-slide img6" id="im" src="~/Uploadfiles/Rli/6.jpg" alt="6">
                        <img class="img-slide img7" id="im" src="~/Uploadfiles/Rli/7.jpg" alt="7">
                        <img class="img-slide img8" id="im" src="~/Uploadfiles/Rli/8.jpg" alt="8">
                        <img class="img-slide img9" id="im" src="~/Uploadfiles/Rli/9.jpg" alt="9">
                    </div>

js代码：

<script src="@Url.Content("~/hom/static/masterslider/masterslider.min.js")"></script>
<script src="@Url.Content("~/ace/assets/js/swiper.min.js")"></script>

<script>
    var index = 0;
    //改变图片
    function ChangeImg() {
        index++;
        var a = document.getElementsByClassName("img-slide");
        if (index >= a.length) index = 0;
        for (var i = 0; i < a.length; i++) {
            a[i].style.display = 'none';
        }
        a[index].style.display = 'block';
    }
    //设置定时器，每隔两秒切换一张图片
    setInterval(ChangeImg, 2000);
</script>

 本文来源参考于https://www.jianshu.com/p/f84b76b67e86