开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现大图滚动的代码

要实现大图滚动的效果，可以使用JavaScript结合CSS来完成。以下是一个简单的示例代码，展示了如何实现大图滚动的效果：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大图滚动</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <img src="image1.jpg" alt="Image 1" class="scroll-image">
        <img src="image2.jpg" alt="Image 2" class="scroll-image">
        <img src="image3.jpg" alt="Image 3" class="scroll-image">
        <!-- 添加更多图片 -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.scroll-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.scroll-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
}

JavaScript代码

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const container = document.querySelector('.scroll-container');

    // 自动滚动功能
    let scrollPosition = 0;
    const scrollInterval = setInterval(() => {
        scrollPosition -= 1; // 向左滚动
        container.scrollLeft = scrollPosition;

        // 如果滚动到最左边，重置位置
        if (scrollPosition <= -container.scrollWidth + window.innerWidth) {
            scrollPosition = window.innerWidth;
        }
    }, 10); // 调整间隔时间以改变滚动速度

    // 可选：添加鼠标悬停停止滚动功能
    container.addEventListener('mouseenter', () => clearInterval(scrollInterval));
    container.addEventListener('mouseleave', () => setInterval(() => {
        scrollPosition -= 1;
        container.scrollLeft = scrollPosition;
        if (scrollPosition <= -container.scrollWidth + window.innerWidth) {
            scrollPosition = window.innerWidth;
        }
    }, 10));
});

解释

HTML结构：创建一个包含多个图片的容器。
CSS样式：
- 使用flex布局使图片水平排列。
- 设置overflow-x: auto允许水平滚动。
- 使用scroll-snap-type和scroll-snap-align实现滚动吸附效果。

JavaScript代码：
- 监听DOMContentLoaded事件确保DOM加载完毕后再执行脚本。
- 使用setInterval实现自动滚动效果。
- 可选地添加鼠标悬停停止滚动的功能。

应用场景

轮播图：适用于网站首页或产品展示页的大图滚动效果。
背景动画：用于创建动态背景，提升用户体验。
广告展示：在广告栏中实现连续滚动的效果。

可能遇到的问题及解决方法

滚动不流畅：
- 确保图片大小合适，避免过大导致加载缓慢。
- 使用requestAnimationFrame替代setInterval优化动画性能。

滚动位置重置问题：
- 在滚动到最左边时，手动重置滚动位置，以实现无缝循环效果。

通过以上代码和解释，你应该能够实现一个简单的大图滚动效果，并根据需要进行调整和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

无缝循环滚动图片的JS代码

无缝循环滚动图片的JS代码，用来展示商品什么的最好了，图片URL可以自行替换，速度也可以自己调试。... 无缝滚动</

12.2K3 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...代码如下： JS实现图片循环滚动 #roll {...=roll> 图....setInterval(Marquee, speed) demo.onmouseover = function() { clearInterval(MyMar)//鼠标移上时清除定时器达到滚动停止的目的

19.8K3 0

js实现文字竖向滚动

代码已上传至github github代码地址：https://github.com/Miofly/mio.git 移动端适配 js/vue.js"> js/jquery-1.11.1.min.js"> (function (doc, win) { // 移动端适配 var...}, methods: { movedome(t = 50) { var margintop = 0; // 上边距的偏移量...$li.is(":animated")) { // 第一个li的动画结束时 if (-margintop > $li.height()) {

23.4K1 0

JS经典案例-无缝滚动轮播图（纯JS）

引言在数字化时代洪流中，无缝滚动轮播图作为网页设计的常青元素，不仅仅是视觉盛宴的开启者，更是用户体验交互的艺术展现。...本文将以最基础的 HTML+css+JavaScript 来实现一个无缝滚动的轮播图案例。...效果图需求制作一款无缝滚动轮播图，具备以下特性：自动无缝滚动切换图片 ️ 鼠标悬停暂停轮播，离开恢复轮播向左/向右按钮切换图片底部小圆点指示当前图片并可点击切换思路图片容器无缝衔接...代码实现 HTML结构这里给放置图片的区域设置颜色来替代了图片代码难点：如何使图片在第一张时点击上一张，向左滚动切换到最后一张。

1K1 0

原生JS实现目录滚动特效

分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下： ? 实现代码如下：原生JS...实现目录滚动特效 body { font-size: 12px; line-height: 24px...span>2013-11-22 9.如何实现...//向上滚动函数 function scrollUp() { //当滚动列表向滚动的高度大于等于列表自身的高度时 if (area.scrollTop

33.1K2 0

js无缝循环滚动图片示例代码

大家好，又见面了，我是你们的朋友全栈君。 html代码图--> <img src="....left; margin: 0; padding: 0; } #banner ul li img { width: 400px; height: 600px; } js...li的宽度乘以所有li的长度 var speed = 2 function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/speed){...oUl.style.left = '0' } //如果右边横向滚动的距离大于0 就让他的位置回到一半 if(oUl.offsetLeft>0){ oUl.style.left = -

12.2K2 0

js实现图的构造

function Edge(data) { this.src = data[0]; this.des = data[1]; ...

2.1K3 0

使用js,html,css实现歌词滚动的效果

先看下效果吧由于实现这个效果的重心是在于js,html 和 css 大家看代码就明白了 html 歌词滚动效果 <audio src="https...绘制页面创建元素片段的作用主要为了优化代码, 提高效率,其实对于这种少数循环插入, 可以不采用. ...设置ul元素偏移这个我们可以看一下图,来更好的方便去理解这个是最大偏移量, 用来后续做边界判断的每次更新时间线之后, ul元素的偏移的量: // 容器高度 var boxclientHeight...完整js代码 data.js var lrc = `[00:01.06]难念的经 [00:03.95]演唱：周华健 [00:06.78] [00:30.96]笑你我枉花光心计 [00:34.15]

2261 0

5大必知的图算法，附Python代码实现

在关系型数据库中，我们无法在不同的行（用户）之间使用这种关系，但在图形数据库中，这样做是相当简单的。在这篇文章中将为大家介绍一些重要的图算法，以及Python 的代码实现。...举一个具体的例子：假设拥有连接世界上任意城市的路网数据，我们需要找出世界上所有的大陆，以及它们所包含的城市。我们该如何实现这一目标呢？...基于BFS / DFS的连通分量算法能够达成这一目的，接下来，我们将用 Networkx 实现这一算法。代码使用 Python 中的 Networkx 模块来创建和分析图数据库。...代码使用下面的代码可以计算子图的介数中心性： pos = nx.spring_layout(subgraph_3437) betweennessCentrality = nx.betweenness_centrality...总结在这篇文章中，我们介绍了了一些最有影响力的图算法。随着社交数据的出现，图网络分析可以帮助我们改进模型和创造价值，甚至更多地了解这个世界。最后，贴上本文代码地址。

3.4K1 1

原生JS实现全屏视频背景滚动淡出

给大家分享一个用原生JS实现全屏视频背景滚动淡出，效果如下 : 以下是代码实现，欢迎大家复制粘贴和收藏。原生JS...实现全屏视频背景滚动淡出 * { margin: 0; padding: 0;...，劳动精神自古以来就流淌在中国人民的血脉之中，去不掉、打不破、灭不了。...“幸福是奋斗出来的”，个人追求的实现，离不开不懈奋斗劳动;家国复兴的使命，也只有靠劳动来成就。

5.2K3 0

js实现自定义滚动条

自定义滚动条目录代码实例代码解析下载源码链接代码实例 * { padding: 0; margin: 0; } #box1 { width: 500px; height:...'); var oBox2 = document.getElementById('box2'); var oBox3 = document.getElementById('box3'); // 按下滚动条后的操作...oBox2.onmousedown = function(e) { // 获取事件的必备操作，保证事件被获取 var oEvent = e || event // 保证只有被按下滚动条后才能执行此函数...document.onmousemove = function(e) { var oEvent = e || event var l = oEvent.clientX - oBox1.offsetLeft // 获取滚动条可活动的宽度范围...h + 'px; 下载源码链接星辉的Github

5.5K3 0

marquee一行代码实现滚动跑马灯效果无需js

网站设计案例展示一般用幻灯片切换会比较高大上，但这需要用到js，第三方博客等网站不支持外嵌js，或者有些网友不知道怎么用，有一种方法可以解决，用标签，可以实现多种滚动效果...，无需js控制。...marquee标签不仅可以滚动文字，也可以滚动图片，表格等，而且使用起来方便快捷，节省了不少时间。实现效果可以看右侧栏。怎么用呢？...一行代码就能搞定： 4.scrolldelay:设定滚动两次之间的延迟时间，值大了会有一步一停顿的效果(设置滚动的时间间隔，单位是毫秒) 语法：<marquee

5.9K5 0

无缝滚动案例简单实现代码

div{float:left;width:100px;height: 100px;background-color: red;} js

1.8K6 0

树状图js的实现方法

本文是基于决策树的需求做的前期demo实现，所以以二叉树为实现目标。基本术语如下：二叉树 1、二叉树中的节点最多只能有两个子节点，一左一右。...因此不怒在度大于2的节点 2、左右子节点的顺序不能颠倒 image.png <button class="btn" onClick...} var leftAngle = angle + baseAngle; var rightAngle = baseAngle - angle; //根据传来的角度...，算出左枝和右枝需要偏移的量 var LdisX = k * parentLength * Math.round(Math.cos(leftAngle / 180 * Math.PI) *...startX, startY * 0.7, 0.7, 90, Math.random() * 30 + 10); } init(); 效果图如下

4K2 0

前端切图:CSS实现隐藏滚动条同时又可以滚动

CSS 实现隐藏滚动条同时又可以滚动原始功能：图片发自简书App 添加伪类之后的功能：图片发自简书App 完整demo如下： <!

1.9K3 0

js实现单张或多张图片持续无缝滚动

背景：想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符...原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插入在结尾，来实现无缝拼接，前提：1、必须是没有设置过渡动画的...，2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。...实现： html主要包含三块： 1、最外层盒子，用来展示滚动图的区域，overflow:hidden; 2、滚动的盒子，主要改变该盒子的定位值，来实现滚动，里面包含所有要滚动的图片或文字 3、包含图片或文字的盒子...代码： class Roll { constructor(opts) { this.elem = opts.elem; // 图片包含滚动长度的元素的 this.elemBox

7.6K1 0

使用js实现横向文字重复滚动，超简单

背景因为公司系统需要实现横向文字滚动效果，所以自己手动写了一个，没用网上的，感觉网上的啰嗦繁琐，扩展性还不行，喜欢的话点赞收藏吧，下面是gif效果图。...效果代码 html代码早上好，您有0条公告信息未读，请您及时查看！！！... css代码，大家可以自行美化。...margin-top: 2px; //上边框 margin-left: 250px; //左边距 } #text{ margin-left: 330px; //调整文字首次加载隐藏值，这里数值大小取决于一开始文字滚动等待的时长...width:360px; //根据你的文字长度定义长度，这里定义好之后，基本js代码就不用动了 } js代码，上面修改好之后，基本不用动。

7.3K2 0

js实现图的构造和遍历

class Graph { constructor() { this.v = {}; this.vLen = 0; ...

1.2K2 0

原生JS实现轮播图

分享一个用原生JS实现轮播图特效，效果如下：以下是代码实现，详情请看注释： <!...var imgWid = screen.offsetWidth; // 1.总体分为两部分: // 2.实现简单轮播图：点击按钮变色，list的运动 /.../ 3.点击按钮变色：根据图片个数创建按钮,实现变色 // 4.左右焦点图：移入移出显示隐藏，点击运动 // 5.点击运动：先跑起来，找到需要特殊处理的点...千万别加else，因为滚动是每次执行所必需的 pic++; animate(list, -pic * imgWid); // 设置对应的按钮进行变色...list.style.left = 0 + "px";//抽回 pic = 0; } // 千万别加else，因为滚动是每次执行所必需的

8.7K2 0

基于jQuery的公告无限循环滚动实现代码

基于jQuery的公告无限循环滚动实现代码，效果如下，多用于pc端电商网站之中不断的循环更新的公告消息。 ? 写一个简单的小demo：基于jQuery的公告无限循环滚动实现代码... js

3.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭