上效果图：

上代码：





<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>scrollLeft</title>


    <style>


        h3,section{


            background-color: skyblue;


            padding: 10px;


            border-radius: 10px;


            margin-top: 20px;


        }


        section{


            padding-bottom: 20px;


        }


        


        .slide{


            display: block; 


            width: 500px;


            height: 300px;


            overflow: hidden;


        }


        .slide img{


            width: 100%;


            height: 100%;


            object-fit: cover;


            vertical-align: top;


        }



        .slide-wrap{


            position: relative;


            width: 500px;


        }



        .slide-wrap > .btn{


            position: absolute;


            width: 60px;


            height: 60px;


            background-color: #f1c40f;


            top: 110px;


            display: flex;


            justify-content: center;


            align-items: center;


        }


        .slide-wrap .left-btn{


            left: 0;


        }


        .slide-wrap .right-btn{


            right: 0;


        }



        /* 手撸个箭头 */


        .arrow{


            width: 30px;


        }


        .arrow div{


            height: 5px;


            background-color: #2c3e50;


        }


        .arrow-top , .arrow-bottom{


            width: 20px;


        }   


        .arrow-top{


            transform:rotate(-45deg) translateY(-4px)


        }    


        .arrow-bottom{


            transform:rotate(45deg) translateY(4px)


        }      


        .arrow-middle{


            width: 30px;


            transform:translateX(-1.5px)


        }


        /* 反转箭头 */


        .arrow-reverse{


            transform: rotate(180deg);


        }  


    </style>


</head>


<body>


    <h3>scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离</h3>



    <h3><b>当前元素必须设置 overflow: hidden;</b> scrollLeft 才会生效</h3>


    <h3>slide设置为display:flex时，谷歌不支持。 为了兼容浏览器，最好设置为block</h3>


    


    <!-- 这个容器只是为了加切换的按钮 -->


    <div class="slide-wrap">


        <!-- 主要切换区域 -->


        <div class="slide">


            <img src="./img/wly.jpg" alt="">


            <img src="./img/wsm.jpg" alt="">


            <img src="./img/wzz.jpg" alt="">


        </div>


        <div class="btn left-btn" id="slidePrevious">


            <div class="arrow">


                <div class="arrow-top"></div>


                <div class="arrow-middle"></div>


                <div class="arrow-bottom"></div>


            </div>


        </div>


        <div class="btn right-btn" id="slideNext">


            <div class="arrow arrow-reverse">


                <div class="arrow-top"></div>


                <div class="arrow-middle"></div>


                <div class="arrow-bottom"></div>


            </div>


        </div>


    </div>



    <section>


        <p>画个箭头</p>


        <div class="arrow">


            <div class="arrow-top"></div>


            <div class="arrow-middle"></div>


            <div class="arrow-bottom"></div>


        </div>


        <p>反转箭头</p>


        <div class="arrow arrow-reverse">


            <div class="arrow-top"></div>


            <div class="arrow-middle"></div>


            <div class="arrow-bottom"></div>


        </div>


    </section>


   


    


        


    <script>


        let slide = document.getElementsByClassName("slide")[0];



        let len = document.getElementsByClassName("slide")[0].children.length;


        


        let i = 0;


        let func = function(){


            if(i==len){


                i=0;


            }


            slide.scrollTop = i*300;


            i++;


        }


        


        let timer = setInterval(func,5000)



        let slideWrap = document.getElementsByClassName("slide-wrap")[0];



        slideWrap.addEventListener("mouseover",function(){


            clearInterval(timer);


        },{capture:true})



        slideWrap.addEventListener("mouseout",function(){


            timer = setInterval(func,5000);


        },{capture:true})



        // 左右切换


        let previous = document.getElementById("slidePrevious");


        let next = document.getElementById("slideNext");



        previous.addEventListener("click",function(){


            if(i==0){


                console.log("nothing");


                i = len-1;


                slide.scrollTop = i*300;


                return


            }else{


                i--;


                console.log(i);


                slide.scrollTop = i*300;


            }


           


        },{


            capture:true


        })


        next.addEventListener("click",function(){


            if(i==(len-1)){


                console.log("nothing");


                i=0;


                slide.scrollTop = i*300;


                return


            }else{


                i++;


                slide.scrollTop = i*300;


            }


          


        },{


            capture:true


        })



    </script>


</body>


</html>




 




由于加载的本地的图片，大佬们可以更改下图片地址，查看效果 。
												


											
js - 使用 scroll属性手撸轮播图 —— 无缝连接，更丝滑的更多相关文章
	

    
						
  1. vue.js学习之better-scroll封装的轮播图初始化失败
		
    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
    
		
    2. 
						
  2. 简单的 js手写轮播图
		
    html: <div class="na1">   <div class="pp">    <div class="na ...
    
		
    3. 
						
  3. Js封装的动画函数实现轮播图
		
    ---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画         function ...
    
		
    4. 
						
  4. 原生JavaScript（js）手把手教你写轮播图插件（banner）
		
    ---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
    
		
    5. 
						
  5. 告别组件之教你使用原生js和css写移动端轮播图
		
    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
    
		
    6. 
						
  6. 原生js用div实现简单的轮播图
		
    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...
    
		
    7. 
						
  7. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
		
    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
    
		
    8. 
						
  8. 原生js轮播图
		
    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. 原生js实现一个简单的轮播图
		
    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
    
		
    10. 
						
  10. React视角下的轮播图
		
    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 浅谈android的activity
			
    说道activity,大家可以说是熟悉的不能再熟悉,首先,先来个镇楼图, 个人觉得谷歌的这张图,比别的什么生命周期图都好;说下各个生命周期注意的: 1:onstart()时,activity可见; 2 ...
    
			
    2. 
						
  2. linux中iptables防火墙相关命令
			
    https://www.cnblogs.com/seven1979/p/4173927.html https://blog.csdn.net/shenjianxz/article/details/62 ...
    
			
    3. 
						
  3. libGDX游戏开发之打包游戏（十二）
			
    libGDX游戏开发之打包游戏(十二) libGDX系列,游戏开发有unity3D巴拉巴拉的,为啥还用java开发?因为我是Java程序员emm-国内用libgdx比较少,多数情况需要去官网和goog ...
    
			
    4. 
						
  4. 【scikit-learn基础】--『监督学习』之 决策树分类
			
    决策树分类算法是一种监督学习算法,它的基本原理是将数据集通过一系列的问题进行拆分,这些问题被视为决策树的叶子节点和内部节点.决策树的每个分支代表一个可能的决策结果,而每个叶子节点代表一个最终的分类结果 ...
    
			
    5. 
						
  5. 在Linux Docker中部署RStudio Server，实现高效远程访问
			
    在Linux Docker中部署RStudio Server,实现高效远程访问     前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE ...
    
			
    6. 
						
  6. 干货分享丨玩转物联网IoTDA服务系列六-恒温空调
			
    摘要:本文主要讲述空调接入到物联网平台后,通过恒温空调控制系统,不论空调是否开机,都可以调整空调默认温度,待空调上电开机后,自动按默认温度调节. 场景简介 通过恒温控制系统,不论空调是否开机,都可以调 ...
    
			
    7. 
						
  7. 云小课｜MRS基础操作之配置DataNode容量均衡
			
    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:当HDFS集群出现 ...
    
			
    8. 
						
  8. 8种图数据库对 NULL 属性值支持情况
			
    摘要:在语义网等图模型中,遵循开放世界假设,对于数据中未包含的事实,都认为是未知的而非假的. 本文分享自华为云社区<图数据库对 NULL 属性值支持情况>,原文作者:你好_TT . NUL ...
    
			
    9. 
						
  9. vue2升级vue3：this.$createElement is not a function—动态组件升级
			
    this.$createElement vue2 动态组件加载,this.$createElement非常好使!比如: import { Component as tsc } from 'vue-ts ...
    
			
    10. 
						
  10. 什么是 A/B 实验，为什么要开 A/B 实验？
			
    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 1.什么是 A/B 实验 A/B 实验也被称为 A/B 测试,实验的基本思路是在线上流量中取出一小部分(较低风险) ...
    
			
    11.