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

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

实现思路：

页面设计部分------先将视口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);
    }
}