2021-04-15

最新推荐文章于 2024-09-14 18:52:56 发布

~夜猫子

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量92

点赞数 1

本文链接：https://blog.csdn.net/weixin_48293310/article/details/115741684

版权

关键词由CSDN通过智能技术生成

我的第一个博客

使用js实现图片轮播

使用几个函数实现

<!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">
    <title>Document</title>
<style>

    *{
        margin: 0;
        padding: 0;
    }
 
    .all{
        height: 250px;
        width: 800px;
        overflow: hidden;
        position: absolute;  
        left: 25%;   
        top: 0%;  


    }
    #banner{
        height: 250px;
        width: 4000px;
    }
    li{
        float: left;
        width: 800px;
        height: 250px;
        list-style: none;
    }
    img{
        width: 100%;
        height: 100%;
    }

.lb{
    width: 45px;
    position: absolute; 
    top: 100px;
    left: 400px;
}

.rb{ 
    width: 45px;
    position: absolute; 
    top: 100px;
    right: 400px;
}
</style>

</head>
<body>

        <div class="all">
            <ul id="banner">
                <li><img src="./img/1.jpg"></li>
                <li><img src="./img/2.jpg"></li>
                <li><img src="./img/3.jpg"></li>
                <li><img src="./img/4.jpg"></li>
                <li><img src="./img/1.jpg"></li>
            </ul>
        </div>   
<script>
var curindex=0
var maxlenth=document.getElementById("banner").getElementsByTagName("li").length-1
var time=null
time=setInterval(changeimg,3000)
var width=800

function changeimg(){
if(curindex<maxlenth){
curindex++;
get_next();
}
else{
    curindex=0;
    reset();
}
}

function get_next(){
var allimg=document.getElementById("banner")
allimg.style.marginLeft="-"+width*curindex+"px"
allimg.style.transition=0.3+"s"
}

function get_before(){
var allimg=document.getElementById("banner")
allimg.style.marginLeft="-"+width*curindex+"px"
allimg.style.transition=0.3+"s"
}
function reset(){
    var allimg=document.getElementById("banner")
    allimg.style.marginLeft="0px"
    allimg.style.transition="0s" 
}


function left(){
if(curindex<maxlenth){
curindex++;
get_next();
}
else{
    curindex=0;
    reset();
}
}

function rigth(){
if(curindex<maxlenth){
curindex--;
get_before();
}
else{
    curindex=0;
    reset();
}
}
</script>
</body>
</html>

在这里插入图片描述