首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 自动滚动功能在当前图像左侧显示上一张图像的一部分

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Container</title>
    <style>
                .scroll-container {
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          height: auto;
          scroll-behavior: smooth;
        }

        div.scroll-container img {
          padding: 0.5px;
          width: 100%;
          height: auto;
        }

        div.hz-scroll {
          position: relative;
        }

        .dots-container {
          display: flex;
          justify-content: left;
          margin-bottom: 1.2em;
        }

        .dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #ccc;
          margin: 0 5px;
          transition: background-color 0.3s ease-in-out;
        }

        .dot.active {
          background-color: #2d2d86;
          /* Highlight color */
        }

        .images {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: 2em;
        }

    </style>
  </head>

  <body>
    <div class="hz-scroll">
      <div class="images">
        <div class="scroll-container" id="scroll-container">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
        </div>
        <div class="dots-container" id="dots-container">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>
  </body>
  <script>
            let scrollInterval;
            const firstimage_scrollContainer = document.getElementById('scroll-container');
            const imageWidth = firstimage_scrollContainer.querySelector('img').clientWidth;

            function scrollItems(direction) {
            if (direction === 'left') {

                if (firstimage_scrollContainer.scrollLeft === 0) {
                firstimage_scrollContainer.scrollLeft = firstimage_scrollContainer.scrollWidth - firstimage_scrollContainer.clientWidth;
                } else {
                firstimage_scrollContainer.scrollLeft -= imageWidth;
                }
            } else if (direction === 'right') {

                if (firstimage_scrollContainer.scrollLeft + firstimage_scrollContainer.clientWidth >= firstimage_scrollContainer.scrollWidth - imageWidth) {
                firstimage_scrollContainer.scrollLeft = 0;
                } else {
                firstimage_scrollContainer.scrollLeft += imageWidth;
                }
            }
            }


            function startAutoScroll() {
            scrollInterval = setInterval(function() {
                scrollItems('right');
            }, 2000); // Adjust the interval as needed (e.g., 3000 milliseconds for 3 seconds)
            }

            startAutoScroll();

            function updateActiveDot() {
            const dotsContainer = document.getElementById('dots-container');
            const dots = dotsContainer.querySelectorAll('.dot');
            const activeIndex = Math.round(firstimage_scrollContainer.scrollLeft / imageWidth);

            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === activeIndex);
            });
            }

            firstimage_scrollContainer.addEventListener('scroll', updateActiveDot);

    updateActiveDot();

  </script>

</html>

https://jsfiddle.net/Ds9999/3nk0zxg1/6/个

我一直在玩jsfiddle，我真的不明白为什么我在当前图像的左侧看到剩余图像的一部分，而随着每个图像向右侧滚动，图像的部分逐渐增加.

我应该为此使用jQuery吗？

推荐答案

为您的图像创建一个DIV.Slide包装:

<div class="slide">
  <img src="some.image" alt="Cinque Terre">
</div>

编辑css以便使用css flex，而不是现在依赖于文本空白的东西:

* { margin: 0; box-sizing: border-box; }

.scroll-container {
    display: flex;
    overflow: hidden;
    height: auto;
    scroll-behavior: smooth;
}

.slide {
    flex: 0 0 100%;
    width: 100%;
}

div.scroll-container img {
    display: block;
    padding: 0.5rem;
    width: 100%;
    height: auto;
}

以下是经过改进的计算后的相关JS:

let scrollInterval;
const cont = document.getElementById('scroll-container');
const imageWidth = cont.children[0].clientWidth;
console.log(imageWidth)
function scrollItems(direction) {
    if (direction === 'left') {

        if (cont.scrollLeft === 0) {
            cont.scrollLeft = cont.scrollWidth - cont.clientWidth;
        } else {
            cont.scrollLeft -= imageWidth;
        }
    } else if (direction === 'right') {
console.log(cont.scrollLeft, cont.scrollWidth)
        if (cont.scrollLeft >= cont.scrollWidth - imageWidth) {
            cont.scrollLeft = 0;
        } else {
            cont.scrollLeft += imageWidth;
        }
    }
}


function startAutoScroll() {
    scrollInterval = setInterval(function() {
        scrollItems('right');
    }, 2000); // Adjust the interval as needed (e.g., 3000 milliseconds for 3 seconds)
}

startAutoScroll();

function updateActiveDot() {
    const dotsContainer = document.getElementById('dots-container');
    const dots = dotsContainer.querySelectorAll('.dot');
    const activeIndex = Math.round(cont.scrollLeft / imageWidth);

    dots.forEach((dot, index) => {
        dot.classList.toggle('active', index === activeIndex);
    });
}

cont.addEventListener('scroll', updateActiveDot);

updateActiveDot();

示例demo on jsFiddle.net

Javascript相关问答推荐

如何找出摆线表面上y与x相交的地方？

浮动Div的淡出模糊效果

如何在输入元素中附加一个属性为checkbox？

还原器未正确更新状态

可更改语言的搜索栏

rxjs插入延迟数据

IF语句的计算结果与实际情况相反

更改预请求脚本中重用的JSON主体变量- Postman

在我的index.html页面上找不到我的Java脚本条形图

Angular 形式，从DOM中删除不会删除指定索引处的内容，但会删除最后一项

为什么客户端没有收到来自服务器的响应消息？

在css中放置所需 colored颜色 以填充图像的透明区域

回溯替代方式

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

按特定顺序将4个数组组合在一起，按ID分组

为什么我的SoupRequest"；被重置为初始值，以及如何修复它？

JQuery使用选项填充HTMLSELECT并设置默认结果，默认结果显示为空

如何设置时间选取器的起始值，仅当它获得焦点时？

在AgGrid中显示分组行的单元格值

打字脚本中的函数包装键入

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630