js实现图片无缝循环跑马灯

亦凉 2021-11-05 23:46 498阅读 0赞

### html 代码 ###

<div class="myls-out-div" style="overflow: hidden;">
    
        <ul id="mylspaomadeng"  class="myls-ul"  >
    
            <li  class="myls-li">
    
                <img  class="myls-img" src="img/indexImg/myls1.png" />
    
            </li>
    
            <li  class="myls-li">
    
                <img  class="myls-img" src="img/indexImg/myls2.png" />
    
            </li>
    
            <li  class="myls-li">
    
                <img  class="myls-img" src="img/indexImg/myls3.png" />
    
            </li>
    
            <li  class="myls-li">
    
                <img  class="myls-img" src="img/indexImg/myls4.png"  />
    
            </li>
    
        </ul>
    
     </div>

### css ###

.myls-out-div {
    
        width: 100%;
    
        height: 212px;
    
        background-color: #fafafa;
    
        float: left;
                
        overflow: hidden;
    
     }
          
     .myls-img {
    
        height: 100%;
    
    }
    
    .myls-ul{
    
        float: left;
    
        height: 100%;
    
        position: relative;
    
        margin: 0px;
    
        padding: 0px;
    
    }
    
     .myls-li{
    
        list-style: none;
    
        display: inline-block;
    
        float: left;
    
        padding-right: 15px;
    
        padding-top: 15px;
    
        padding-bottom: 15px;
    
        height: 100%;
    
    }

### js代码 ###

function mylsRunHorseLight() {
    
          if (mylsTimer != null) {
    
                clearInterval(mylsTimer);
    
          }
    
          var oUl = document.getElementById("mylspaomadeng");
    
          if(oUl != null){
    
                oUl.innerHTML += oUl.innerHTML;
    
                oUl.innerHTML += oUl.innerHTML;
    
                oUl.innerHTML += oUl.innerHTML;
    
                var lis = oUl.getElementsByTagName('li');
    
                var lisTotalWidth = 0;
    
                var resetWidth = 0;
    
                for (var i = 0; i < lis.length; i++) {
    
                      lisTotalWidth += lis[i].offsetWidth;
    
                }
    
                for (var i = 1; i <= lis.length / 4; i++) {
    
                      resetWidth += lis[i].offsetWidth;
    
                }
    
                oUl.style.width = lisTotalWidth + 'px';
    
                var left = 0;
    
                mylsTimer = setInterval(function() {
    
                      left -= 1;
    
                      if (left <= -resetWidth) {
    
                            left = 0;
    
                      }
    
                      oUl.style.left = left + 'px';
    
                }, 20)
    
                $("#mylspaomadeng").hover(function() {
    
                      clearInterval(mylsTimer);
    
                }, function() {
    
                      clearInterval(mylsTimer);
    
                      mylsTimer = setInterval(function() {
    
                            left -= 1;
    
                            if (left <= -resetWidth) {
    
                                  left = 0;
    
                            }
    
                            oUl.style.left = left + 'px';
    
                      }, 20);
    
                })
    
          }
    
    }

### 注意事项 ###

正常来说，宽度是自动获取进行计算的。在普通的工程下都没有问题，在 Spring Boot 项目中，我发现此处失效，查看原因是因为图片加载过慢，没有找到特别好的解决办法，直接将宽度限制死了。宽度的两种方法大家根据自身需要选择。目前失效的问题只出现在了 Spring Boot 工程上。

转载于:https://www.cnblogs.com/jichi/p/11313124.html

发表评论取消回复

表情：

评论列表（有 0 条评论，498人围观）

还没有评论，来说两句吧...

相关阅读

相关 html 跑马灯

废话不多说，直接代码copy进去运行就知道了 <!DOCTYPE html> <html> <head> <meta charse

约定不等于承诺〃/ 2023年06月11日 12:26/ 0 赞/ 34 阅读

相关跑马灯

vue 跑马灯思路：将字符串的第一个字符取出，再将剩下的所有字符取出，重新拼接字符串，将第一个字符放在最后，设置计时器。代码如下： <!DOCTYPE h

Bertha 。/ 2022年12月01日 15:53/ 0 赞/ 254 阅读

相关 uniapp的项目，scss和js实现跑马灯

`页面组件` <view class="innovate"> <view class="l"> <image class="noticeTwo"

曾经终败给现在/ 2022年10月07日 11:45/ 0 赞/ 866 阅读

相关使用TextView实现跑马灯的效果

单个跑马灯效果： <TextView android:id="@+id/button1" android:ellips

ゞ浴缸里的玫瑰/ 2022年07月24日 05:09/ 0 赞/ 199 阅读

相关跑马灯

[https://github.com/search?l=Java&q=%E8%B7%91%E9%A9%AC%E7%81%AF&type=Repositories&utf8=%

谁践踏了优雅/ 2022年06月05日 09:27/ 0 赞/ 262 阅读

相关 js图片无缝滚动

> 虽然是一个简单的案例，但思想确实很巧妙，且一通百通！主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动用利用视觉

爱被打了一巴掌/ 2022年03月25日 08:57/ 0 赞/ 408 阅读

相关 vue.js 实现跑马灯的效果

要求：点击“动起来”按钮实现跑马灯的效果（即字符自动滚动），点击“不要动”按钮实现跑马灯停止。 html源码： <div id="go"> <bu

谁践踏了优雅/ 2022年02月28日 13:34/ 0 赞/ 305 阅读

相关 js实现图片无缝循环跑马灯

html 代码 <div class="myls-out-div" style="overflow: hidden;"> <ul id=

亦凉/ 2021年11月05日 23:46/ 0 赞/ 499 阅读

相关 js title跑马灯

<html> <head> <meta charset="utf-8"> <title id="a">一二三四五六</title>

小灰灰/ 2021年07月24日 23:12/ 0 赞/ 474 阅读

相关 js实现图片无缝滚动

js实现图片无缝滚动实现原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插...

红太狼/ 2020年06月03日 13:47/ 0 赞/ 780 阅读