第一个相对完善的滑动轮播图_多图滑动轮播css代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43789897/article/details/85147119

本文分享了一个简易的滑动轮播图实现方案，使用HTML、CSS和JavaScript完成。轮播图通过调整图片位置实现自动滑动效果，每张图片尺寸为500x300像素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小白完善的第一个简易滑动轮播图！！！
仅供个人记录学习与分享；
若有不足之处请求前辈指教提点；

HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图</title>
    <link rel="stylesheet" href="lbt.css">
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <ul>
                <img src="img/1.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/8.jpg" alt=""><img src="img/9.jpg" alt=""><img src="img/114.jpg" alt=""><img src="img/1.jpg" alt="">
            </ul>
        </div>
    </div>
    <script src="lbt.js"></script>
</body>
</html>

CSS代码：
*{
    padding: 0;
    margin:0;
    text-decoration:none;
    list-style:none;
}

body,html{
    width:100%;
    height:100%;
    overflow:hidden;
}

.wrapper{
    position: relative;
    width:100%;
    height:100%;
    border:1px solid black;
    background-color: #333;
}

.box{
    position: relative;
    width:500px;
    height:300px;
    border:2px solid black;
    top: 250px;
    left: 50%;
    margin-left: -250px;
    overflow:hidden;
}

ul{
    position: absolute;
    height: 300px;
    overflow:hidden;
    white-space: nowrap;
}

img{
    width: 500px;
    height: 300px;
}

JS代码：
var lbt = document.getElementsByTagName('ul')[0];

var timer;

function init(){
    timer = setInterval(function (){
     lbt.style.left = parseInt(window.getComputedStyle(lbt, null).left) + (-5) + 'px';
        if(parseInt(lbt.style.left) == -2500){
            clearInterval(timer);
            setTimeout(function(){
             lbt.style.left = "0px";
                init();
            }, 500);
        }
        else if(parseInt(lbt.style.left)%500 == 0){
            clearInterval(timer);
            setTimeout(function(){
                init();
            }, 500);
        }
    }, 10);

}

setTimeout(function(){
    init();
}, 1000);