web轮播图（{内涵js源码，支持动态更换图片大小，显示框大小）

置顶王哪跑啊

已于 2022-10-20 20:55:42 修改

阅读量658

点赞数 1

文章标签： javascript 前端 html

于 2022-10-20 20:54:46 首次发布

本文链接：https://blog.csdn.net/qq_55107504/article/details/127434927

版权

<HTML>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./carousel.css">
    <script src="./carousel.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div class="imglist">
            <ul>
                <li><img src="./tu/1.jpg" alt=""></li>
                <li><img src="./tu/2.jpg" alt=""></li>
                <li><img src="./tu/3.jpg" alt=""></li>
                <li><img src="./tu/1.jpg" alt=""></li>
            </ul>
        </div>
        <div class="lilist">
            <ul>
                
            </ul>
        </div>
        <li class="arrow-l"><</li>
        <li class="arrow-r">></li>
    </div>
</body>
</html>

<CSS>

*{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.box{
    position: relative;
    margin: 200px auto;
    width: 800px;
    height: 400px;
    overflow: hidden;
    list-style: none;
}
.imglist ul{
    width: 3200px;
    height: 400px;
    float: left;
    position: absolute;
}
img{
    width: 800px;
    height: 400px;
    float: left;
}
.lilist ul {
    position: absolute;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    width: 100px;
    height: 20px;

    bottom: 0px;
    left: 50%;
    
    
}
.lilist ul li{
    position: relative;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: antiquewhite;
    border-radius: 100%;
    
}
.arrow-l{
    position: absolute;
    width: 30px;
    left: 0px;
    top: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color:rgb(129, 115, 115);
    display: none;
    opacity: 30%;
}
.arrow-r{
    position: absolute;
    width: 30px;
    height: 40px;
    background-color: rgb(129, 115, 115);
    right: 0px;
    top: 50%;
    line-height: 40px;
    text-align: center;
    display: none;
    opacity: 30%;
    
}
.lilist ul .current{
    background-color:orange;
}

<js>

window.addEventListener('load',function(){
    var arrowl=document.querySelector('.arrow-l')
    var arrowr=document.querySelector('.arrow-r')
    var box=this.document.querySelector('.box')
    var imglist=this.document.querySelector('.imglist ul')
    var lilist=this.document.querySelector('.lilist ul')
    var imgwith=box.offsetWidth
    var num=0
    var cir=0
    function move(obj,target,fun){
        clearTimeout(obj.timer)
        obj.timer=setInterval(function(){
            var step=(target-obj.offsetLeft)/10
            
            step= step>0 ? Math.ceil(step):Math.floor(step)
             if(obj.offsetLeft==target){
                
                clearTimeout(obj.timer)
               if(fun){
                fun()
               }
            }
                obj.style.left = obj.offsetLeft + step + 'px';
            
        },15)
    }

    box.addEventListener('mouseenter',function(){
        arrowl.style.display='block'
        arrowr.style.display='block'
    })
    box.addEventListener('mouseleave',function(){
        arrowl.style.display='none'
        arrowr.style.display='none'
    })
    for(var i=0;i<imglist.children.length;i++){
        var li=this.document.createElement('li')
        li.setAttribute('index',i)
        lilist.append(li)
        li.addEventListener('click',function(){
            for(var j=0;j<lilist.children.length;j++){
                lilist.children[j].className=''
            }
            this.className='current'
            var index=this.getAttribute('index')
            num=index
            cir=index
            move(imglist,-imgwith*index)
        })
    }
    lilist.children[0].className='current'
    lilist.removeChild(lilist.children[lilist.children.length-1])
    
    arrowr.addEventListener('click',function(){
        if(num==lilist.children.length){
            imglist.style.left=0 + 'px'
            num=0
        }
        num++;
        
        cir++
        if(cir==lilist.children.length){
            cir=0
        }
        move(imglist,-num*imgwith)
        change()
       
    })
    arrowl.addEventListener('click',function(){
        if(num==0){
            
            num=lilist.children.length
            imglist.style.left=-num*imgwith + 'px'
        }
        if(cir==0){
            cir=lilist.children.length
        }
        num--;
        cir--;
        move(imglist,-num*imgwith)
        change()
    })
    function change(){
        for(var i=0;i<lilist.children.length;i++){
            lilist.children[i].className=''
        }
        lilist.children[cir].className='current'
    }
    var timer=setInterval(function(){
        arrowr.click();
    },2000)
    box.addEventListener('mouseenter',function(){
        clearInterval(timer)
    })
    box.addEventListener('mouseleave',function(){
        timer=setInterval(function(){
            arrowr.click();
        },2000)
    })
    



})