简洁原生js实现轮播图

Posted 2020-09-13 MrLQZ

html:

<div class="comiis_wrapad" id="slideContainer">
        <div id="frameHlicAe" class="frame cl">
            <div class="temp"></div>
            <div class="block">
                <div class="cl">
                    <ul class="slideshow" id="slidesImgs">
                        <li><a href="" target="_blank">
                            <img src="images/1.jpg"/></a><span class="title">1</span></li>
                        <li><a href="" target="_blank">
                            <img src="images/2.jpg"/></a><span class="title">2</span></li>
                        <li><a href="" target="_blank">
                            <img src="images/3.jpg"/></a><span class="title">3</span></li>
                        <li><a href="" target="_blank">
                            <img src="images/4.jpg"/></a><span class="title">4</span></li>
                        <li><a href="" target="_blank">
                            <img src="images/5.jpg"/></a><span class="title">5</span></li>
                    </ul>
                </div>
                <div class="slidebar" id="slideBar">
                    <ul>
                        <li class="on">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

 

css:

*{word-wrap:break-word;}
body{color:#444;font:12px/1.5 Tahoma,‘Microsoft Yahei‘,Simsun;}
body,li,ul{margin:0;padding:0;}
ul li{list-style:none;}
a{color:#000;text-decoration:none;}
a:hover{text-decoration:underline;}
a img{border:none;}
.cl:after{clear:both;display:block;visibility:hidden;height:0;content:".";}
.cl{zoom:1;}
.frame{margin-bottom:10px;border:1px solid #e1e1e1;background:#FFF;}
.title{overflow:hidden;padding:0 10px;height:32px;font-weight:700;font-size:14px;line-height:32px;}
.block{margin:10px 10px 0;}
.temp{margin:1px;}
.slideshow{clear:both;}
.slideshow li{position:relative;overflow:hidden;}
.slideshow span.title{position:absolute;bottom:0;left:0;margin-bottom:0;width:100%;height:32px;text-indent:10px;font-size:14px;line-height:32px;}
.slidebar li,.slideshow span.title{overflow:hidden;background:rgba(0,0,0,.3);color:#FFF;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000, endColorstr=#30000000);}
.slidebar li{float:left;margin-right:1px;width:20px;height:20px;text-align:center;font-size:10px;line-height:20px;cursor:pointer;}
.slidebar li.on{background:rgba(255,255,255,.5);color:#000;font-weight:700;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF, endColorstr=#50FFFFFF);}
li,ul{list-style:none;}
a:hover{color:#a50001;text-decoration:underline;}
.frame{margin-bottom:0;border:0 solid #fff;background:0 0;}
.temp{margin:0;}
.slidebar{position:absolute;top:5px;left:4px;}
.slidebar li,.slideshow span.title{overflow:hidden;background:rgba(0,0,0,.3);color:#FFF;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000, endColorstr=#90000000);}
.slidebar li.on{background:rgba(255,255,255,.5);color:#ff0;font-weight:700;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000, endColorstr=#90000000);}
.slideshow SPAN.title{text-indent:0;}
.block{position:relative;margin:0;}
#frameHlicAe{margin:0!important;border:0!important;}
.comiis_wrap960,.comiis_wrapad{margin:0 auto;width:100%;}
.comiis_wrapad{margin-top:10px;}
.comiis_wrapad{overflow:hidden;}
.comiis_wrapad img{float:left;margin-top:0;width:100%;height:400px;}
#slidesImgs li{display:none;width:100%;}

js:

function SlideShow(c) {
    var a = document.getElementById("slideContainer"), f = document.getElementById("slidesImgs").getElementsByTagName("li"), h = document.getElementById("slideBar"), n = h.getElementsByTagName("li"), d = f.length, c = c || 3000, e = lastI = 0, j, m;
    function b() {
        m = setInterval(function () {
            e = e + 1 >= d ? e + 1 - d : e + 1;
            g()
        }, c)
    }
    function k() {
        clearInterval(m)
    }
    function g() {
        f[lastI].style.display = "none";
        n[lastI].className = "";
        f[e].style.display = "block";
        n[e].className = "on";
        lastI = e
    }
    f[e].style.display = "block";
    a.onmouseover = k;
    a.onmouseout = b;
    h.onmouseover = function (i) {
        j = i ? i.target : window.event.srcElement;
        if (j.nodeName === "LI") {
            e = parseInt(j.innerHTML, 10) - 1;
            g()
        }
    };
    b();
};
最后启动传参这个函数（参数是时间）：SlideShow（3000）