JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴

下面我将详细讲解如何实现“JavaScript 轮播图和自定义滚动条配合鼠标滚轮”的效果。

准备工作

在开始编写代码之前,我们需要准备以下工作:

  1. HTML 结构:轮播图和滚动条需要放在 HTML 中,并有正确的类名和 ID。
  2. CSS 样式:为轮播图和滚动条提供基础样式,并为鼠标滚轮事件提供支持。
  3. JavaScript 代码:实现轮播图和滚动条的逻辑,并添加鼠标滚轮事件的监听器。

在这里,我们假设已经完成了以上准备工作,现在开始编写 JavaScript 代码。

实现轮播图和滚动条

首先,我们需要定义一个轮播图对象和一个滚动条对象。

const carousel = {
  // 定义轮播图对象
  // ...
};

const scrollbar = {
  // 定义滚动条对象
  // ...
};

轮播图和滚动条的具体实现可以根据需要进行编写。这里我们使用了一些已有的代码库来快速实现。

我们假设轮播图对象的 HTML 结构如下所示:

<div class="carousel">
  <div class="carousel-items">
    <div class="carousel-item">
      <img src="img1.jpg">
    </div>
    <div class="carousel-item">
      <img src="img2.jpg">
    </div>
    <div class="carousel-item">
      <img src="img3.jpg">
    </div>
  </div>
</div>

滚动条对象的 HTML 结构如下所示:

<div class="scrollbar">
  <div class="thumb"></div>
</div>

其中,.carousel.scrollbar 分别表示轮播图和滚动条的容器,.carousel-items 表示轮播图中的图片列表,.carousel-item 表示单个图片,.scrollbar 表示滚动条容器,而 .thumb 则是滚动条的拖动块。

添加滚轮事件

接下来,我们需要为页面添加鼠标滚轮事件的监听器。具体代码如下:

function handleWheelEvent(event) {
  // 判断滚动条是否在滚动时被禁用
  if (!scrollbar.enabled) {
    return;
  }

  // 判断哪个对象是滚动的目标
  const target = event.target.closest('.carousel, .scrollbar');
  if (target === null) {
    return;
  }

  // 阻止默认滚动事件
  event.preventDefault();

  // 根据滚动方向计算相应的偏移量
  const delta = event.deltaY || event.detail || event.wheelDelta;
  const direction = delta > 0 ? 1 : -1;
  const offset = direction * scrollbar.step;

  // 如果鼠标滚动事件发生在滚动条上,则让滚动条滚动
  if (target.classList.contains('scrollbar')) {
    scrollbar.scrollBy(offset);
  }

  // 如果鼠标滚动事件发生在轮播图上,则让轮播图滚动
  if (target.classList.contains('carousel')) {
    carousel.scrollBy(offset);
  }
}

document.addEventListener('wheel', handleWheelEvent, { passive: false });

在上面的代码中,我们定义了一个 handleWheelEvent 函数,并将其添加到页面的 wheel 事件监听器中。当用户滚动鼠标滚轮时,这个函数会被触发。

在这个函数中,我们首先判断了目标对象是否是轮播图或滚动条。如果不是,就直接返回。然后我们阻止了默认的滚动事件,并根据滚动方向计算了相应的偏移量。

最后,我们根据滚动事件发生的对象,调用对应的滚动方法,让它们进行滚动。

禁用滚动条滚动

在上面的代码中,我们通过判断 scrollbar.enable 的值,来决定是否禁用滚动条的滚动。

我们可以使用以下代码来禁用滚动条的滚动:

scrollbar.enabled = false;

当需要启用滚动条的滚动时,只需要将 scrollbar.enabled 的值设置为 true 即可。

实例

下面,我们来看两个具体的示例。

示例一:自定义轮播图

在这个示例中,我们使用了一个名为 Swiper 的轮播图插件。这个插件提供了许多丰富的配置项,让我们可以自定义轮播图的外观和行为。

下面是示例代码:

const mySwiper = new Swiper('.carousel', {
  autoplay: false,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

const scrollbar = {
  element: document.querySelector('.scrollbar'),
  thumb: document.querySelector('.thumb'),
  enabled: true,
  maxOffset: 0,
  step: 10, // 每次滚动的距离
  scrollBy(offset) {
    const oldOffset = parseInt(this.thumb.style.top) || 0;
    const newOffset = Math.max(0, Math.min(this.maxOffset, oldOffset + offset));
    this.thumb.style.top = `${newOffset}px`;
    const ratio = newOffset / this.maxOffset;
    mySwiper.slideTo(Math.floor(ratio * (mySwiper.slides.length - 1)));
  },
  update() {
    const height = this.element.clientHeight;
    const thumbHeight = Math.max(30, Math.round((height / mySwiper.slides.length) * 1.2));
    this.thumb.style.height = `${thumbHeight}px`;
    this.maxOffset = height - thumbHeight;
  },
};

mySwiper.on('init', () => {
  scrollbar.update();
});

mySwiper.on('slideChange', () => {
  const ratio = mySwiper.realIndex / (mySwiper.slides.length - 1);
  const offset = Math.round(ratio * scrollbar.maxOffset);
  scrollbar.thumb.style.top = `${offset}px`;
});

document.addEventListener('wheel', handleWheelEvent, { passive: false });

在这个示例中,我们首先创建了一个 Swiper 对象,来实现轮播图的滑动效果。然后,我们定义了一个滚动条对象,并在 initslideChange 事件中更新滚动条的位置。最后,我们使用 handleWheelEvent 函数监听了鼠标滚动事件。

示例二:自定义滚动条

在这个示例中,我们没有使用任何第三方插件,而是使用原生 JavaScript 实现了自定义的滚动条。这个滚动条可以用于任何需要滚动的元素,只需要将 HTML 结构和 JavaScript 代码进行相应的调整即可。

下面是示例代码:

<div class="scrollable">
  <div class="content">
    <p>这里是一大段内容,需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容,需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容,需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容,需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容,需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容,需要使用滚动条来进行查看。</p>
    <p>这里是一大段内容,需要使用滚动条来进行查看。</p>
  </div>
  <div class="scrollbar">
    <div class="thumb"></div>
  </div>
</div>
const scrollable = document.querySelector('.scrollable');
const content = document.querySelector('.scrollable .content');
const scrollbar = {
  element: document.querySelector('.scrollable .scrollbar'),
  thumb: document.querySelector('.scrollable .thumb'),
  enabled: true,
  maxOffset: 0,
  step: 50, // 每次滚动的距离
  scrollBy(offset) {
    const oldOffset = content.scrollTop;
    const newOffset = Math.max(0, Math.min(this.maxOffset, oldOffset + offset));
    content.scrollTop = newOffset;
    const ratio = newOffset / this.maxOffset;
    this.thumb.style.top = `${ratio * 100}%`;
  },
  update() {
    const height = scrollable.clientHeight;
    const contentHeight = content.scrollHeight;
    const thumbHeight = Math.max(30, Math.round((height / contentHeight) * height));
    this.thumb.style.height = `${thumbHeight}px`;
    this.maxOffset = contentHeight - height;
  },
};

scrollable.addEventListener('scroll', () => {
  const ratio = content.scrollTop / scrollbar.maxOffset;
  scrollbar.thumb.style.top = `${ratio * 100}%`;
});

scrollbar.thumb.addEventListener('mousedown', (event) => {
  event.preventDefault();
  document.addEventListener('mousemove', handleThumbMove);
  document.addEventListener('mouseup', handleThumbUp);
});

function handleThumbMove(event) {
  event.preventDefault();
  const rect = scrollbar.thumb.getBoundingClientRect();
  const offsetY = event.clientY - rect.top - scrollbar.thumb.clientHeight / 2;
  const ratio = offsetY / (scrollbar.element.clientHeight - scrollbar.thumb.clientHeight);
  const newOffset = scrollbar.maxOffset * ratio;
  scrollbar.scrollBy(newOffset - content.scrollTop);
}

function handleThumbUp(event) {
  event.preventDefault();
  document.removeEventListener('mousemove', handleThumbMove);
  document.removeEventListener('mouseup', handleThumbUp);
}

scrollable.addEventListener('wheel', handleWheelEvent, { passive: false });

在这个示例中,我们首先定义了一个 .scrollable 的容器,在其中包含了一个 .content 的元素用来显示内容,以及一个 .scrollbar 的元素用来显示滚动条。然后,我们定义了一个滚动条对象,并实现了滚动条的拖动功能。最后,我们使用 handleWheelEvent 函数监听了鼠标滚动事件。

总结

以上就是 JavaScript 轮播图和自定义滚动条配合鼠标滚轮的完整攻略。在实现这个效果时,我们需要了解 HTML 和 CSS 的基础知识,同时掌握一些 JavaScript 的技巧,如拖动、滚动等等。这个效果对于网页的用户体验有很大的帮助,可以让用户更加自由地查看页面中的内容。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码

    接下来是详细讲解“兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码”的完整攻略。 首先,需要说明一下遮罩层的概念。遮罩层是一种常见的页面蒙版(或称为遮挡层),一般情况下用于模拟弹窗、广告等强制性消息窗口。我们需要在页面上添加一个遮罩层,通过覆盖整个网页并给予透明度,使得用户无法操作网页内的元素,同时突出弹出的窗口。 接下来,我们来分步骤讲解 jQu…

    css 2023年6月10日
    00
  • 结合CSS3的布局新特征谈谈常见布局方法

    结合CSS3的布局新特征谈谈常见布局方法 CSS3引入了许多新的布局特性,使得网页布局更加灵活和多样化。本攻略将结合CSS3的布局新特征,讨论常见的网页布局方法,并提供两个示例说明。 1. 常见的网页布局方法 1.1. 流式布局 流式布局是一种基于百分比的布局方法,它可以根据浏览器窗口大小自动调整页面布局。流式布局可以使页面在不同设备上呈现出更好的可读性和可…

    css 2023年5月18日
    00
  • 简单掌握CSS3中resize属性的用法

    下面是详细讲解“简单掌握CSS3中resize属性的用法”的完整攻略。 一、简介 CSS3中的resize属性可以让我们控制一个元素是否可以改变大小。通过设置resize属性的值,我们可以控制元素的可调整大小范围和方向。有时候,我们需要让用户能够通过拖动边框来调整元素的大小以适配不同的屏幕,这时候resize属性就有了很大的作用。 二、语法 resize属性…

    css 2023年6月10日
    00
  • CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大

    下面是CSS实现圆形放大镜狙击镜效果的攻略: 1. 使用CSS实现圆形放大镜狙击镜效果的基本步骤 1.1 HTML部分 首先,需要在HTML中创建图像容器以及用于显示放大结果的空间容器,例如: <div class="image-container"> <img src="example.jpg" a…

    css 2023年6月10日
    00
  • 整理了12款Javascript 表格控件(DataGrid)

    让我为您详细讲解一下“整理了12款JavaScript表格控件(DataGrid)”的攻略。 1. 前言 在网页应用开发过程中,表格展示是一个非常重要的功能。然而,原生的HTML表格功能有时会受到限制,这时候需要使用JavaScript表格控件来实现更加复杂和独特的表格展示效果。本文将介绍12款优秀的JavaScript表格控件,以及它们的应用场景、使用方法…

    css 2023年6月10日
    00
  • 使用CSS3实现圆角,阴影,透明

    使用CSS3,我们可以轻松实现元素的圆角、阴影和透明效果。下面是实现这些效果的攻略。 实现圆角 CSS3中提供了border-radius属性,它允许我们为元素添加圆角。border-radius属性有四个值,分别对应四个角,也可以只设置其中的几个。例如: div{ border-radius: 5px 10px 5px 10px; } 上面的代码表示左上角…

    css 2023年6月9日
    00
  • js实现从右向左缓缓浮出网页浮动层广告的方法

    要实现从右向左缓缓浮出网页浮动层广告,我们可以使用JavaScript编写代码来实现。以下是实现该功能的攻略: 1. HTML代码 首先,我们需要在HTML中添加需要显示广告的元素,并设定其样式为 display:none ,以隐藏该元素。例如: <div id="float-ad" style="display:none…

    css 2023年6月10日
    00
  • HTML 结构化实现方法

    下面是HTML结构化实现方法的完整攻略: 第一步:确定页面结构 在开发网页前,我们需要先确定我们网页的结构,这样才能更好地进行开发。一般来说,一个网页的结构包含了头部(header)、导航(nav)、主体(main)、侧边栏(sidebar)以及尾部(footer)等几个部分。在确定这些结构的时候,我们可以参考网站的设计稿或者是对现有网站的分析,确定出这些结…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部