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日

相关文章

  • BootstrapValidator超详细教程(推荐)

    BootstrapValidator超详细教程(推荐) 简介 BootstrapValidator 是一个针对 Bootstrap 的表单验证插件,能够在客户端对表单进行验证,使得用户在提交表单前能够方便地发现并修复错误。BootstrapValidator 具备以下特点: 友好的 UI 体验 支持多种校验方式,如正则表达式、长度等 支持 Ajax 校验 支…

    css 2023年6月10日
    00
  • Javascript 两种刷新方法以及区别和适用范围

    我们来详细讲解一下“Javascript 两种刷新方法以及区别和适用范围”。 介绍 在前端开发中,我们经常需要使用 JavaScript 来实现页面的动态效果,同时也需要实现页面的自动刷新。这里介绍两种 JavaScript 刷新方式及其区别和适用范围。 刷新方式 1. location.reload() 方法 location.reload() 方法是 J…

    css 2023年6月10日
    00
  • Vue实现户籍管理系统户籍信息的添加与删除方式

    为了实现Vue实现户籍管理系统户籍信息的添加与删除,我们需要先了解Vue的相关知识和技术。 准备工作 首先我们需要安装Vue.js的开发环境,包括Vue.js本体和Vue CLI。我们可以通过以下命令来安装: #安装Vue.js $ npm install vue #安装Vue CLI $ npm install -g @vue/cli 添加户籍信息 要添加…

    css 2023年6月9日
    00
  • 2分钟教你实现环形/扇形菜单(基础版)

    实现环形/扇形菜单可以为网站或应用程序增加一些交互性和视觉吸引力。下面是一个完整攻略,包含了如何使用 HTML、CSS 和 JavaScript 实现环形/扇形菜单的过程和两个示例说明。 实现环形/扇形菜单 步骤一:HTML 结构 首先,我们需要创建一个 HTML 结构来容纳菜单项。下面是一个示例: <div class="menu&quot…

    css 2023年5月18日
    00
  • CSS网页实例 利用box-sizing实现div仿框架结构实现代码

    下面我会提供一个详细的攻略来讲解“CSS网页实例 利用box-sizing实现div仿框架结构实现代码”。首先,我们需要了解box-sizing的概念。 box-sizing是CSS3中的一个属性,用于指定盒子的尺寸计算模式,默认值为content-box。在content-box模式下,盒子的宽度和高度只包括内容的尺寸,而不包括边框和内边距的尺寸。而在bo…

    css 2023年6月10日
    00
  • 匹配form表单中所有内容的正则表达式

    匹配form表单中所有内容的正则表达式通常用于对表单数据的验证或提取。以下是一些该正则表达式的攻略: 正则表达式 <form.+?>([\s\S]*?)<\/form> 详细解释 该正则表达式包含了两个部分: <form.+?>: 匹配<form>标签的起始部分,并匹配任意数量的包含在<>中的字符,…

    css 2023年6月10日
    00
  • js滚动条平滑移动示例代码

    这里为大家详细讲解一下JavaScript滚动条平滑移动的示例代码的攻略。下面将从以下几个方面进行说明: 简介 代码实现 示例说明 简介 滚动条平滑移动是一种常见的网页动效,这种效果可以让网页更加平滑自然,提升用户体验。本文提供的示例代码可以让您快速实现此功能。 代码实现 要实现滚动条平滑移动的效果,我们需要使用以下几个技术和方法: document.doc…

    css 2023年6月10日
    00
  • 让横向排列的几个浮动(float:left)的子div居中显示

    要让横向排列的浮动子 div 居中显示,可以采用以下两种方法: 1. 使用 Flex 布局 使用 Flex 布局是最简单、最好理解的方法,同时也是最常用的方法之一。通过设置 flex 容器的属性,可以让子元素自动排列,并自动居中。 以下是具体实现步骤: 设置容器的 display 属性为 flex。 .parent { display: flex; } 设置…

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