87JS原生：跑马灯效果

最新推荐文章于 2022-07-25 17:50:43 发布

weixin_30765505

最新推荐文章于 2022-07-25 17:50:43 发布

阅读量119

点赞数

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967134.html

版权

实现原理：将图片复制一份放到第一份图片后面；第一份图片从显示区左边界跑出多少、第二份图片就从显示区右边界跑入多少；第一份图片完全跑出显示区时，第二份图片则完全跑入显示区。此时瞬间切换至轮播开始时的状态。
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
        div{
            position: relative;
            width: 800px;
            height: 200px;
            border: 5px solid lightgreen;
            margin:10px auto;
            overflow: hidden;
        }
        div ul{
            position: absolute;
            left:0;
            top:0;
        }
        div ul li{
            width: 200px;
            height: 200px;
            float: left;
        }
        div ul li img{
            width:100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517838828_mthumb.jpg" alt=""/></li>
        <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517841171_mthumb.jpg" alt=""/></li>
        <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517843343_mthumb.jpg" alt=""/></li>
        <li><img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1509/06/c5/12226915_12226915_1441517845828_mthumb.jpg" alt=""/></li>
    </ul>
</div>
<script>
    var oUl=document.getElementsByTagName('ul')[0];
    var lis=oUl.getElementsByTagName('li');
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=lis.length*lis[0].offsetWidth+'px';
    var left=null;
    var timer=setInterval(function(){
        left-=3;
        if(left<-oUl.offsetWidth/2){
            left=0;
        }
        oUl.style.left=left+'px'
    },20)
</script>
</body>
</html>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967134.html

weixin_30765505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
87JS原生：跑马灯效果

实现原理：将图片复制一份放到第一份图片后面；第一份图片从显示区左边界跑出多少、第二份图片就从显示区右边界跑入多少；第一份图片完全跑出显示区时，第二份图片则完全跑入显示区。此时瞬间切换至轮播开始时的状态。```html:run<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫