上效果图：

上代码：





<!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 subprocess 使用(二)
			
    Python subprocess 使用(二) 本篇继续介绍subprocess的使用. 这里主要添加两个自己在工作过程中常用的两个小命令. 1: 获取顶层activity import subpro ...
    
			
    2. 
						
  2. Havoc C2d的初次使用
			
    Havoc C2 简介 Havoc是一款现代化的.可扩展的后渗透命令控制框架 当前的Havoc版本还处于早期开发版,随着框架的不断成熟,可能会对Havoc的API和核心结构进行大量更改 以下的配置部分 ...
    
			
    3. 
						
  3. Python——第二章：字符串操作——大小写转换
			
    字符串常规操作 字符串的操作一般不会对原字符串产生影响. 一般是返回一个新的字符串 字符串大小写转换 .capitalize() 是字符串方法之一,在 Python 中用于将所有字符串的第一个母转换为 ...
    
			
    4. 
						
  4. adobe全家桶破解网站
			
    原文链接:https://baiyunju.cc/8602 总有一些国内.外的大神在破解Adobe全家桶软件,包括Windows.Mac系统最新版的2021.2022版PS.AI.PR.PL.ME.I ...
    
			
    5. 
						
  5. 2024-01-06：用go语言，在河上有一座独木桥，一只青蛙想沿着独木桥从河的一侧跳到另一侧 在桥上有一些石子，青蛙很讨厌踩在这些石子上 由于桥的长度和青蛙一次跳过的距离都是正整数 我们可以把独木桥
			
    2024-01-06:用go语言,在河上有一座独木桥,一只青蛙想沿着独木桥从河的一侧跳到另一侧 在桥上有一些石子,青蛙很讨厌踩在这些石子上 由于桥的长度和青蛙一次跳过的距离都是正整数 我们可以把独木桥 ...
    
			
    6. 
						
  6. C++ 学习宝藏网站分享
			
    C++ 学习宝藏网站分享 1. C++ 在线参考手册 Cppreference https://zh.cppreference.com C++ 开发者必备的在线参考手册,是我最常访问的 C++ 网站之 ...
    
			
    7. 
						
  7. vue部署项目报错导致空白页解决
			
    在nginx上部署项目出现空白页并报错 解决方法: 在vue的vue.config.js文件中 改成:module.exports = {publicPath: './'}
    
			
    8. 
						
  8. kylin&CDH理论基础
			
    Kylin&CDH理论基础 一.维度与度量 维度是观察数据的角度.比如电商的销售数据,可以从时间维度来观察,进一步细化时间和地区维度来观察. 度量是被聚合的统计值,也是聚合运算的结果.知道维度 ...
    
			
    9. 
						
  9. 【华为云技术分享】STM32L476移植华为LiteOS系列教程（二）---开发前准备
			
    在进行移植华为LiteOS开发工作之前,我们是需要提前做一些准备工作,如:开发工具.环境.源码等相关事宜. 一.准备开发工具 STM32CubeMX用于生成工程文件:STM32CubeMX下载地址 I ...
    
			
    10. 
						
  10. 玩转云上数据湖，解析Serverless 技术落地
			
    导读: 本文主要介绍Serverless计算相关技术与其在华为云数据湖探索服务(后文简称DLI)中的技术落地.Serverless是DLI将计算能力服务化和产品化关键技术,与传统IAAS和PAAS技术 ...
    
			
    11.