首先引用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>
    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