原生JS简单实现图片无缝滚动

偏执的太偏执、 2021-10-24 00:58 393阅读 0赞

图片无缝滚动的轮播主要利用滚动轴–x来实现，首先是HTML部分的实现

<div id="d1">
        <div id="d2">
            <div id="d3">
                <img src="./0118练习/img/111.jpg" alt=""/>
                <img src="./0118练习/img/222.jpg" alt=""/>
                <img src="./0118练习/img/333.jpg" alt=""/>
                <img src="./0118练习/img/444.jpg" alt=""/>
                <img src="./0118练习/img/555.jpg" alt=""/>
                <img src="./0118练习/img/666.jpg" alt=""/>
                <img src="./0118练习/img/777.jpg" alt=""/>
                <img src="./0118练习/img/888.jpg" alt=""/>
            </div>
            <div id="d4"></div>
        </div>
    </div>

再是CSS部分的实现

*{
                margin: 0;
            }
            #d1{
                width: 1200px;
                height: 200px;
                overflow-x: scroll;
            }
            #d2{
                width: 4800px;
                height: 200px;
            }
            #d3,#d4{
                width: 2400px;
                height: 200px;
                float: left;
            }
            #d3>img,#d4>img{
                position: relative;
                width: 300px;
                height: 100%;
                float: left;
            }

最后是js 部分的实现

var d1=document.getElementById("d1");
        var d3=document.getElementById("d3");
        var d4=document.getElementById("d4");
        var speed=2;
        var time=setInterval(function(){
            if(d1.scrollLeft==0){
                d1.scrollLeft=2400;
            }
            d4.innerHTML=d3.innerHTML;
            var scroll=d1.scrollLeft;
            scroll-=speed;
            d1.scrollLeft=scroll;
        },10)

这种无缝滚动比较简单，结束

发表评论取消回复

表情：

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

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

相关阅读

相关原生JS实现无缝轮播

今天分享前端开发学习中的一个很经典的案例——原生JS实现无缝轮播图。需求： 1.鼠标移入轮播图时左右两边显示上一页下一页按钮，移出时隐藏 2.鼠标点击箭头，图片发生轮播

客官°小女子只卖身不卖艺/ 2023年06月24日 05:24/ 0 赞/ 24 阅读

相关 js使用transition效果实现无缝滚动

转自：[http://www.pinlue.com/article/2020/09/0916/5311219316405.html][http_www.pinlue.com_a

快来打我*/ 2022年12月10日 05:58/ 0 赞/ 233 阅读

相关 JS图片滚动代码（无缝、平滑）

非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的应用

曾经终败给现在/ 2022年08月25日 09:18/ 0 赞/ 239 阅读

相关 css + js实现简单无缝滚动字幕

css + js实现无缝滚动字幕 > 利用js和css就可以很方便的实现一个无缝滚动字幕，使得列表在一个方框里不停滚动目录 css js实现无缝滚动字幕

Dear 丶/ 2022年06月17日 04:44/ 0 赞/ 304 阅读

相关 10行原生JS实现文字无缝滚动

废话不多说，直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <

向右看齐/ 2022年06月09日 13:11/ 0 赞/ 221 阅读

相关原生 js 实现无缝滚动轮播

上一次我们看了如何实现简单的轮播图，以及各种常用的效果实现；这一次，我们看看无缝滚动轮播图的实现（利用左边的margin 来实现）；原理：我们创建一个div，下图共

Love The Way You Lie/ 2022年05月28日 11:00/ 0 赞/ 328 阅读

相关 js实现无缝向上滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 265 阅读

相关 js图片无缝滚动

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

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

相关原生JS简单实现图片无缝滚动

图片无缝滚动的轮播主要利用滚动轴–x来实现，首先是HTML部分的实现 <div id="d1"> <div id="d2">

偏执的太偏执、/ 2021年10月24日 00:58/ 0 赞/ 394 阅读

相关 js实现图片无缝滚动

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

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