【HTML5】老式放映机原理-实现图片无缝滚动

源码方舟

已于 2025-05-06 10:41:55 修改

阅读量563

点赞数 9

分类专栏： HTML5 文章标签： html5 前端 html javascript css css3

于 2025-04-29 15:11:32 首次发布

本文链接：https://blog.csdn.net/weixin_41798072/article/details/147612220

版权

HTML5 专栏收录该内容

3 篇文章

订阅专栏

老式放映机原理-实现图片无缝滚动

实现思路：

页面设计部分——先将视口div设置为相对定位，再视口div里面嵌套一个类似“胶卷”的div,把该div设置为绝对定位，此时“胶卷"会挂靠在视口上面，再将“胶卷”的left属性设置为负值，实现向左移动“胶卷”。要想实现无缝滚动还需复制一块一摸一样的“胶卷”，当第一个胶卷向左滚动，第二块胶卷紧跟着第一块胶卷后面，从视觉上实现第一个胶卷上向左滚动时第一个消失的图片又从后面出现了，从而达到无缝滚动的视觉效果。
在这里插入图片描述

1.页面布局

<div class="scroll">
        <ul class="scroll_list">
            <li class="scroll_list_item"><a>图片1</a></li>
            <li class="scroll_list_item"><a>图片2</a></li>
            <li class="scroll_list_item"><a>图片3</a></li>
            <li class="scroll_list_item"><a>图片4</a></li>
            <li class="scroll_list_item"><a>图片5</a></li>
            <li class="scroll_list_item"><a>图片6</a></li>
            <li class="scroll_list_item"><a>图片7</a></li>
            <li class="scroll_list_item"><a>图片8</a></li>
        </ul>
    </div>

2.css样式设置

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.scroll{
    height: 300px;
    width: 1200px;
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.scroll_list{
    display: flex;
    flex-direction: row;
    margin-right: 10px;
    position: absolute;
    left: 0;
}
.scroll_list_item{
    margin-top: 15px;
    width: 180px;
    height: 260px;
    border: 1px solid blue;
}

3.js部分

window.onload = function(){
    scroll_list();
}

/**  
 * seckill_time  无缝滚动
 * 
 */
function scroll_list() {
    // 1 第一步 获取元素
    let scrollWraper = document.querySelector('.scroll');
    let scrollWraperList = document.querySelector('.scroll_list');  
    
    // 2 第二步 复制一份子节点
    let oHtml  =scrollWraperList.innerHTML;
    oHtml += oHtml;
    scrollWraperList.innerHTML = oHtml;
    // 3 第三步 计算scrollWraperList宽度   一个li宽度* li的个数
    
   let length = scrollWraperList.children.length;
   let aLiWidth = scrollWraperList.children[0].offsetWidth;
   scrollWraperList.style.width = aLiWidth * length + "px";
    // 4 第四步 滚动
    let left = 0;
    let timer =setInterval(move, 10);
    function move() {
        left--;
        if (left < - scrollWraperList.offsetWidth / 2) {
            left = 0;
        }
        scrollWraperList.style.left = left + "px";
    }
    scrollWraper.onmouseover = function(){
        clearInterval(timer);
    }
    scrollWraper.onmouseout = function(){
        timer =setInterval(move, 10);
    }
}