前端小白--marquee无缝滚动

来源：互联网发布：淘宝店铺背景音乐推荐编辑：程序博客网时间：2024/05/17 09:31

本文主要是通过原生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>

阅读全文

0 0