上效果图：

上代码：





<!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. 【Python】【OpenCV】定位条形码（一）
			
    关于二维码和条形码的检测和识别,在OpenCV中已经有提供了对应的API,cv2.QRCodeDetector() | cv2.barcode_BarcodeDetector() ,相关的实现极其简单 ...
    
			
    2. 
						
  2. cmd命令根据端口号杀进程
			
    1.根据端口查到进程pid netstat –ano|findstr 端口号 1 2.使用taskkill命令杀死进程 taskkill /pid pid 1 温馨提醒: 1.执行完第一步后,命令行显 ...
    
			
    3. 
						
  3. ElasticSearch之cat anomaly detectors API
			
    curl -X GET "https://localhost:9200/_cat/ml/anomaly_detectors?v=true&pretty" --cacert  ...
    
			
    4. 
						
  4. 【笔记】01 -- Spring-Cloud介绍
			
    第一章节我们主要是介绍微服务 springCloud的架构和分布式的区别 但是后面会主要介绍netflix公司与Alibaba公司的两套架构 系统架构 **概述** 随着互联网的发展,网站应用的规模不 ...
    
			
    5. 
						
  5. Pikachu漏洞靶场 Sql Inject（SQL注入）
			
    SQLi 哦,SQL注入漏洞,可怕的漏洞. 文章目录 SQLi 数字型注入(post) 字符型注入(get) 搜索型注入 xx型注入 "insert/update"注入 inser ...
    
			
    6. 
						
  6. spring-mvc 系列：域对象共享数据
			
    目录 一.使用ServletAPI向request域对象共享数据 二.使用ModelAndView向request域对象共享数据 三.使用Model向request域对象共享数据 四.使用Map向re ...
    
			
    7. 
						
  7. RasaGPT对话系统的工作原理
			
    RasaGPT 结合了 Rasa 和 Langchain 这 2 个开源项目,当超出 Rasa 现有意图(out_of_scope)的时候,就会执行 ActionGPTFallback,本质上就是利用 ...
    
			
    8. 
						
  8. KubeCon China 2023 | 拥抱开源，华为云原生华彩绽放
			
    本文分享自华为云社区<KubeCon China 2023 | 拥抱开源,华为云原生华彩绽放>,作者: 云容器大未来 . 2023 年度云原生全球旗舰盛会 KubeCon + CloudN ...
    
			
    9. 
						
  9. 聊聊Java的异常机制问题
			
    摘要:java异常指在程序运行时可能出现的一些错误,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,中断了正在执行的程序的正常指令流. 本文分享自华为云社区<Ja ...
    
			
    10. 
						
  10. 云数据库 GaussDB(for Influx) 解密第十一期：让智能电网中时序数据处理更高效
			
    摘要:GaussDB(for Influx)是一款基于计算存储分离架构,完全兼容 InfluxDB 生态的云原生时序数据库. 本文分享自华为云社区<云数据库 GaussDB(for Influx ...
    
			
    11.