标签：index none 实现 length js slide lis display 幻灯片

使用原生js实现轮播图

html代码

    <div class="slide">
        <ul>
            <li style="display: block;">
                <img src="1.jpg">
            </li>
            <li>
                <img src="2.jpg">
            </li>
            <li>
                <img src="3.jpg">
            </li>
            <li>
                <img src="4.jpg">
            </li>
            <li>
                <img src="5.jpg">
            </li>
        </ul>
        <span class="pre"> < </span>
        <span class="next"> > </span>
    </div>

css代码

*{padding:0; margin: 0;}
ul,ol,li{list-style: none;}
img{vertical-align: top; border: none;}
a{text-decoration: none;}
body{font-size: 14px; font-family: '微软雅黑';}


.slide{
    width: 250px;
    height: 90px;
    margin: 100px auto;
    position: relative;
}
.slide>ul>li{
    position: absolute;
    float: left;
    display: none;
}
.slide>ul>li:first-child{
    display:block;
}
.slide>ul>li>img{
    width:250px; height:90px;
}

.slide>span{
    position:absolute;
    top:30px;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    display:block;
    width: 20px; text-align: center;
    height:30px; line-height: 30px;
}
.slide>.pre{
    left:0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.slide>.next{
    right: 0;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

js代码

        let index = 0; //当前索引
        var pre = document.getElementsByClassName("pre")[0];
        var next = document.getElementsByClassName("next")[0];
        var lis = document.getElementsByClassName("slide")[0].children[0].children;
        next.onclick = function() {
            index++;
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.display = "none";
            }
            // index = index + 1 == lis.length ? 0 : index;最后一张则回到第一张
            if (index == lis.length) {
                index = 0;
            }
            lis[index].style.display = "block";

        }
        pre.onclick = function() {
            index--;
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.display = "none";
            }
            // index = index + 1 == lis.length ? 0 : index;第一张上一张则为最后一张
            if (index < 0) {
                index = lis.length - 1;
            }
            lis[index].style.display = "block";
        }

        function auto() {
            next.click();
        }
        let s = setInterval("auto()", 2000);
        for (let i = 0; i < lis.length; i++) {
            lis[i].onmouseenter = function() {
                clearInterval(s);
            }
            lis[i].onmouseleave = function() {
                s = setInterval("auto()", 2000);
            }

        }        

标签：index,none,实现,length,js,slide,lis,display,幻灯片
来源： https://www.cnblogs.com/jxweber/p/16635977.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。