前端小白--marquee无缝滚动

版权声明:本文为博主原创文章,未经博主允许不得转载。如有转载请留言,谢谢~ https://blog.csdn.net/qq_38209578/article/details/78795826

本文主要是通过原生js实现无缝滚动marquee

案例图片

这里写图片描述

Tips:早期的css不过优雅,所以如需引用自行完善

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .marquee-wrap{
            width: 1000px;
            height: 150px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
            border: 1px solid red;
        }
        .marquee-wrap ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        .marquee-wrap ul li{
            float: left;
            width: 200px;
            height: 150px;
            list-style: none;
        }
        .marquee-wraps{
            position: relative;
        }
        .marquee-wraps a:first-child{
            position: absolute;
            left: 0;
            top: 75px;
            z-index: 10;
        }
        .marquee-wraps a:nth-child(2){
            position: absolute;
            right: 0;
            top: 75px;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="marquee-wraps" id="marquee-wraps">
    <a href="javascript:">向左走</a>
    <a href="javascript:">向右走</a>
</div>
<div class="marquee-wrap" id="marquee-wrap">
    <ul>
        <li><a href="javascript:"><img src="images/accordian/1.jpeg" alt="" width="200" height="150"></a></li>
        <li><a href="javascript:"><img src="images/accordian/2.jpeg" alt="" width="200" height="150"></a></li>
        <li><a href="javascript:"><img src="images/accordian/3.jpeg" alt="" width="200" height="150"></a></li>
        <li><a href="javascript:"><img src="images/accordian/4.jpeg" alt="" width="200" height="150"></a></li>
        <li><a href="javascript:"><img src="images/accordian/5.jpeg" alt="" width="200" height="150"></a></li>
    </ul>
</div>
</body>
<script>
    window.onload=function(){
        var oDiv=document.getElementById('marquee-wrap');
        var oDiv1=document.getElementById('marquee-wraps');
        var oUl=document.getElementsByTagName('ul')[0];
        var aLi=document.getElementsByTagName('li');
        var speed=-2;
        oUl.innerHTML+=oUl.innerHTML;
        oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
        function marqueeFn(){
            if(oUl.offsetLeft<-oUl.offsetWidth/2){
                oUl.style.left='0';
            }
            if(oUl.offsetLeft>0){
                oUl.style.left=-oUl.offsetWidth/2+'px';
            }
            oUl.style.left=oUl.offsetLeft+speed+'px';
        }
        var timer=setInterval(marqueeFn,30);
        oDiv.onmouseover=function(){
            clearInterval(timer);
        };
        oDiv.onmouseout=function(){
            timer=setInterval(marqueeFn,30);
        };
        oDiv1.getElementsByTagName('a')[0].onclick=function(){
            speed=-4;
        };
        oDiv1.getElementsByTagName('a')[1].onclick=function(){
            speed=2;
        };
    };

</script>
</html>
展开阅读全文

没有更多推荐了,返回首页