当前位置：网站首页>简单的轮播图

简单的轮播图

2022-07-27 06:10:00 【猿码当先】

html部分

<body>
    <div class="foucs" onmouseover="end()" onmouseout="start()">
        <div id="imgs">
            <img src="./img/1.jpg" />
            <img src="./img/2.jpg" />
            <img src="./img/3.jpg" />
            <img src="./img/4.jpg" />
            <img src="./img/5.jpg" />
        </div>
        <div class="nav">
            <ul id="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>

        <h1 id="left" onclick="left()">&lt;</h1>
        <h1 id="right" onclick="right()">&gt;</h1>
    </div>
</body>

css样式段

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div.foucs{
        position: relative;
    }
    div.foucs:hover{
        cursor: pointer;
    }
    div.foucs h1{
        position: absolute;
        font-size: 50px;
    }
    div.foucs h1#left{
        top: 150px;
    }
    div.foucs h1#right{
        top: 150px;
        right: 10px;
    }
    div.foucs img{
        width: 100%;
        height: 350px;
        display: none;
    }
    ul{
        list-style: none;
        position: absolute;
        bottom: 10%;
        left: 30%;
        /* background-color: brown; */
        
    }
    ul li{
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 0 30px;
        background-color: darkgrey;
        border-radius: 50%;
    }
</style>

js部分

<script>
    let i = 0;
    function demo(){
        let imgs =  document.getElementById("imgs").children;
        let list =  document.getElementById("list").children;
        for(let n =0;n<imgs.length;n++){
            imgs[n].style = "display:none";
            list[n].style = "background-color:darkgrey";
        }
        imgs[i].style = "display:block";
        list[i].style = "background-color:red";
        i++;
        if(i==imgs.length){
            i=0;
        }
    }
    demo();
    let interval =  setInterval(demo,3000);


    function end(){
        clearInterval(interval);
    }
    function start(){
        interval =  setInterval(demo,3000);
    }


    let j = 0;
    let list = document.getElementById("list").children;
    while(j<list.length){

        list[j].index = j;
        list[j].onmouseover = function(){
            i = this.index;
            demo();
        }
        j++;
    }

    function left(){
        let imgs =  document.getElementById("imgs").children;
        if(i==1){
            i = imgs.length - 1;
        }else if(i==0){
            i = imgs.length-2;
        }else{
            i-=2;
        }
        // i-=2;
        demo();
    }
    function right(){
        demo();
    }

</script>

可以自动轮播照片，可以点击导航切换，可以点击左右按钮切换，鼠标悬停在图片上时，停止轮播，离开后继续播放

 

原网站

版权声明
本文为[猿码当先]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_63293142/article/details/125917865

边栏推荐

猜你喜欢

随机推荐