多张图片轮播滚动

最新推荐文章于 2021-06-05 04:15:15 发布

hmily43

最新推荐文章于 2021-06-05 04:15:15 发布

阅读量685

点赞数

本文链接：https://blog.csdn.net/hmily43/article/details/108516864

版权

<!DOCTYPE html>
<html>
<head>
    <title>无缝滚动</title>
    <style type="text/css">
    *{margin:0;padding: 0;}
        .roll .wrap{width:1500px;overflow: hidden; height: 344px;margin: 0 auto;position: relative;}
        .roll li{float: left;list-style: none;width: 700px;height: 344px;}
        .roll ul{position: absolute;top: 0;left: 0;}
    }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oDiv=document.getElementById('roll');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName("li");
            var iSpeed=-5;
            var timer=null;
            oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
            timer=setInterval(function(){
                oUl.style.left=oUl.offsetLeft+iSpeed+'px';
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left='0px';
                }
            },30);

            oUl.onmouseover=function(){
            clearInterval(timer);
        }
        oUl.onmouseout=function(){
            timer=setInterval(function(){
                oUl.style.left=oUl.offsetLeft+iSpeed+'px';
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oul.style.left='0px';
                }
            },30);
        }
        };
        
    </script>
</head>
<body>
<div class="roll" id="roll">
    <div class="wrap">
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
        </ul>
    </div>
</div>
</body>
</html>

hmily43

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
多张图片轮播滚动

<!DOCTYPE html><html><head> <title>无缝滚动</title> <style type="text/css"> *{margin:0;padding: 0;} .roll .wrap{width:1500px;overflow: hidden; height: 344px;margin: 0 auto;position: relative;} .
复制链接

扫一扫