轮播图--无缝滚动

最新推荐文章于 2022-11-05 16:33:29 发布

秋天1014童话

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量399

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53355321

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

轮播图–无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        img{
            vertical-align: top; /*消除3px的距离*/
        }
        .box{
            width: 600px;
            height: 200px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
            border: 1px solid red;
        }
        ul{
            width: 400%;
            position: absolute;
            left: 0;
            top: 0;
        }
        ul li{
            float: left;
        }
    </style>
    <script>    
    window.onload = function(){
        function $(id){ return document.getElementById(id); }  
        var timer = null;
        var num = 0;
        timer = setInterval(autoPlay,20);
        function autoPlay(){
            num--;
            if(num<=-1200){ 
                 num = 0;
            }
            $("picBox").style.left = num + "px";           
        }
        $("picBox").onmouseover = function(){
            clearInterval(timer);
        }
        $("picBox").onmouseout = function(){
            timer = setInterval(autoPlay,20);
        }
    }
    </script>
</head>
<body>
    <div class="box" id="scroll">
        <ul id="picBox">
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
        </ul>
    </div>
</body>
</html>

秋天1014童话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图--无缝滚动

轮播图–无缝滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{
复制链接

扫一扫

专栏目录