上效果图：

上代码：





<!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. 用Linux搭建网站（LAMP）
			
    安装环境 演示服务器版本为CentOS 8 安装apache 下载apache yum install httpd httpd-devel 启动apache服务器 systemctl start ht ...
    
			
    2. 
						
  2. Pikachu漏洞靶场 Unsafe Filedownload（不安全的文件下载）
			
    不安全的文件下载 概述 文件下载功能在很多web系统上都会出现,一般我们当点击下载链接,便会向后台发送一个下载请求,一般这个请求会包含一个需要下载的文件名称,后台在收到请求后会开始执行下载代码,将该文 ...
    
			
    3. 
						
  3. JavaFx之全局异常捕获（二十）
			
    JavaFx之全局异常捕获(二十) javafx开发时,我们有时候需要捕获未处理的异常.手动抛出的异常,在main方法中添加下面代码: public static void main(String[] ...
    
			
    4. 
						
  4. Git 的底层原理
			
    前言 ​ 基于 Git 的使用,已经在前文有过相关的介绍,使用 Git 用作日常的开发基本上是足够的.现在,本文将详细介绍一些有关 Git 的实现原理. 底层命令与上层命令 ​ 一般情况下,正常使用的 ...
    
			
    5. 
						
  5. rasa train nlu详解：1.1-train_nlu()函数
			
      本文使用<使用ResponseSelector实现校园招聘FAQ机器人>中的例子,主要详解介绍train_nlu()函数中变量的具体值. 一.rasa/model_training.p ...
    
			
    6. 
						
  6. 秋风到，ModelArts“ AI市场算法Fast-SCNN指南”秋膘贴起来
			
    本文分享自华为云社区<带你来秋日尝鲜 | ModelArts AI市场算法Fast-SCNN使用指导>,作者:Tianyi_Li 摘要:送小伙伴们一份新鲜出炉的ModelArts AI市场 ...
    
			
    7. 
						
  7. 火出边际的Serverless，你居然还不了解？
			
    摘要:图灵奖获得者David A. Patterson和Spark共同创始人Ion Stoica,在19年伯克利的会议上发布Serverless将是下一代默认的计算范式. 本文分享自华为云社区< ...
    
			
    8. 
						
  8. React Native 打包 App 发布 iOS 及加固混淆过程
			
    React Native 打包 App 发布 iOS 及加固混淆过程 摘要 本文将介绍如何使用 React Native 打包并发布 iOS 应用到 App Store,并介绍了如何进行应用的加固和混 ...
    
			
    9. 
						
  9. 如何在Windows上将iOS应用上传到App Store
			
      Application Uploader iOS App上架工具是一款非常好用的针对iOS苹果应用程序软件开发的实用编程工具,它的主要作用是帮助用户进行快速的程序应用设计和程序应用调试,节省用户进 ...
    
			
    10. 
						
  10. 火山引擎DataLeap数据血缘技术建设实践
			
    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 DataLeap是火山引擎数智平台VeDI旗下的大数据研发治理套件产品,帮助用户快速完成数据集成.开发.运维.治理 ...
    
			
    11.