上效果图：

上代码：





<!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. shell中 << EOF 和 EOF 使用
			
    转载请注明出处: EOF(End of File)在Shell中通常用于指示输入的结束,并在脚本或命令中进行多行输入.它允许用户指定一个特定的分界符来表示输入的结束,通常用于创建临时文件.重定向输入或 ...
    
			
    2. 
						
  2. 限制左键拖拽图片阴影vue
			
    <template> <div> <img ref="image" :src="imageUrl" :style="im ...
    
			
    3. 
						
  3. API生态的发展与机遇：从5000组数据看中国API生态与开发者现状
			
    摘要:华为云联合多家单位发布了<中国API生态与开发者现状调研报告(2020年)>,旨在通过API生态.API开发者.使用者.API全生命周期管理等多视角展现我国API发展的现状与机遇,力 ...
    
			
    4. 
						
  4. DTSE Tech Talk | 第11期：深入浅出畅谈华为云低时延直播技术
			
    摘要:详解华为云低时延直播在时延.首屏.卡顿率等体验的优化方案,及如何快速接入方法. 本文分享自华为云社区<DTSE Tech Talk | 第11期:深入浅出畅谈华为云低时延直播技术>, ...
    
			
    5. 
						
  5. 火山引擎 DataLeap 推出全链路智能监控报警平台
			
    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着大数据开发场景下需要运维管理的任务越来越多,在日常运维中开发者经常会面临以下几个问题: 任务多,依赖关系复杂: ...
    
			
    6. 
						
  6. ES6常用知识学习札记
			
    转载请注明出处 原文连接 http://blog.huanghanlian.com/article/5c7aa6c7bf3acc0864870f9d es6 是什么 首先弄明白ECMA和js的关系.E ...
    
			
    7. 
						
  7. 小姐姐跳舞，AI 视频生成太酷了
			
    大家好,我是章北海 最近AI视频领域的研究进展神速,看得眼花缭乱. 这里老章就把最近几天看过印象深刻的四个项目介绍给大家,同时附上项目相关简介.论文.代码等资料,感兴趣的同学可以深度研究一下. < ...
    
			
    8. 
						
  8. 国内申请微软新必应（New Bing）
			
    国内申请微软新必应(New Bing) 本文解决了两个问题: 1 需国外网络环境 2 点击加入候补名单无限返回错误 注册outlook邮箱 https://outlook.live.com/ 一步一步 ...
    
			
    9. 
						
  9. 深挖 Python 元组 pt.2
			
    哈喽大家好,我是咸鱼 在<深挖 Python 元组 pt.1>中我们了解 Python 元组的一些概念(索引和切片等),以及如何创建元组,最重要的是我们还介绍了元组的不可变特性 那么今天我 ...
    
			
    10. 
						
  10. 骨牌摆放问题 POJ 2411（状态压缩DP）
			
    题目: 给你\(n*m(1<=n,m<=11)\)的方格矩阵,要求用1*2的多米诺骨牌去填充,问有多少种填充方法. 比如下图是对于如下2x6的方格矩阵,可能的填充方案之一. 该如何使用动态 ...
    
			
    11.