js学习笔记-----无缝滚动的实现

最新推荐文章于 2023-08-14 21:17:27 发布

扣肉馅饺子

最新推荐文章于 2023-08-14 21:17:27 发布

阅读量89

点赞数

分类专栏：学习笔记文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/qq_42607483/article/details/108291263

版权

学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js部分：

var obox = document.getElementById('box');
var li = document.getElementsByTagName('li');
var n=0;
var timer=setInterval(function(){
    n=n-1;
    if(n<=-1200){
        n=0;
    }
    obox.style.left=n+'px';
},1)

for(n=0;n<li.length;n++){
    li[n].onmouseenter=function(){
        clearInterval(timer);
        for(j=0;j<li.length;j++){
            li[j].setAttribute('class','oli')
        }
        this.removeAttribute('class')
    }
    li[n].onmouseleave=function(){
        timer=setInterval(function(){
            n=n-1;
            if(n<=-1200){
                n=0;
            }
            obox.style.left=n+'px';
        },1)
        for(j=0;j<li.length;j++){
            li[j].removeAttribute('class')
        }
    }
}

css部分：

*{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
body{
    background-color: black;
}
div{
    width: 600px;
    height: 100px;
    border: 1px solid lime;
    margin: 150px auto;
    overflow: hidden;
}
ul{
    width: 1800px;
    position: relative;
}
ul li{
    width: 300px;
    height: 100px;
    float: left;
}

li.oli{
    opacity: 0.3;
}

ul li:nth-of-type(1),ul li:nth-of-type(5){
    background-color: magenta;

}
ul li:nth-of-type(2),ul li:nth-of-type(6){
    background-color: rgb(255, 0, 0);
}
ul li:nth-of-type(3){
    background-color: rgb(0, 255, 42);
}
ul li:nth-of-type(4){
    background-color: rgb(255, 255, 0);
}

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/无缝滚动.css">
</head>
<body>
    <div>
        <ul id="box">
            <li class="oli"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="js/无缝滚动.js"></script>
</body>
</html>

扣肉馅饺子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记-----无缝滚动的实现

js部分：var obox = document.getElementById('box');var li = document.getElementsByTagName('li');var n=0;var timer=setInterval(function(){ n=n-1; if(n<=-1200){ n=0; } obox.style.left=n+'px';},1)for(n=0;n<li.length;n++){
复制链接

扫一扫