JavaScript练手小技巧:利用鼠标滚轮控制图片轮播

2024-09-07 18:44

本文主要是介绍JavaScript练手小技巧:利用鼠标滚轮控制图片轮播,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

近日,在浏览网站的时候,发现了一个有意思的效果:一个图片轮播,通过上下滚动鼠标滚轮控制图片的上下切换。

于是就有了自己做一个的想法,顺带复习下鼠标滚轮事件。

鼠标滚轮事件,参考这篇文章:鼠标滚轮事件-CSDN博客

一、HTML和CSS

无论怎么样的滚动,首先要制作图片轮播的结构和样式。

HTML:

<div class="box" id="box"><ul class="list" id="list"><li><img src="../images/pic1.jpg" alt=""></li><li><img src="../images/pic2.jpg" alt=""></li><li><img src="../images/pic3.jpg" alt=""></li><li><img src="../images/pic4.jpg" alt=""></li><li><img src="../images/pic5.jpg" alt=""></li></ul>   <div class="dots" id="dots"></div>
</div>

HTML结构很简单,就是一个 div 里面套了两个结构:图片区和控制点区。

  • 图片区 ul#list,就是一个 ul,里面有多个 li 嵌套了图片。
  • 控制点区 div#dots 没有内容,这是因为控制点要根据图片的数量(ul 的 li 个数)动态生成。

CSS:

*{margin: 0;padding: 0;
}
ul,li,ol{list-style: none;
}
.box{width: 600px;height: 399px;border:20px #000 solid;margin-left: auto;margin-right: auto;overflow: hidden;position: relative;margin-top: 100px;
}
.list{position: relative;
}
.list img{display: block;
}
.list li{width: 600px;height: 399px;overflow: hidden;
}
.box .dots{position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;background: rgba(255,255,255,0.5);padding: 5px;border-radius: 30px;
}
.box .dots span{display: block;width: 15px;height: 15px;background: #fff;border-radius: 50%;margin-left: 5px;margin-right: 5px;cursor: pointer;
}
.box .dots span.active{background: #f30;
}

CSS代码如上,就不分析了,反正就这样。强调两点:

  • 整个  div.box 要相对定位,约束绝对定位的控制点区 div#dots
  • ul.list 也要相对定位,因为要复制第一个图,放到最后;复制最后一个图,放到第一图的前面。复制出来的图都是绝对定位的。

二、JS

1. 为了防止重复执行滚动事件,写一个 flag,当为 true 的时候,就不执行滚动事件。默认值为 false。

let isScroll = false;

2. 根据图片的个数动态生成点(span)。为了防止过度操作 DOM,使用了  createDocumentFragment 缓存生成的span 标签。

let li = list.querySelectorAll("li");
let li_len = li.length;
let index = 0;
let wrap = document.createDocumentFragment();
// 初始化工作
for(let i = 0; i < li_len; i++){let span = document.createElement("span");span.dataset.index = i;if(i == 0){span.classList.add("active");}wrap.appendChild(span);span.addEventListener("click",function(){index = this.dataset.index;changePic(index);} );
}
dots.appendChild(wrap);

3. 上下移动图片,就是在控制图片的 transform 的 translateY 属性。

// 图片切换函数:index++
function nextPic(){index++;if( index >= li_len ){index = 0;list.style.transform = "translateY(399px)"; // 调整list位置document.body.offsetHeight; // 强制重绘HTML}changePic(index);
}// 图片切换函数:index--
function prevPic(){index--;if( index < 0 ){index = li_len - 1;list.style.transform = "translateY(" + (-399*li_len) + "px)";document.body.offsetHeight; // 强制重绘HTML}changePic(index);
}

 4. 切换图片,就是在换图,已经更改控制点的样式。

// 切换图片
function changePic(index){// 点的切换let dotsBros = findeBros(dots_span[index]);dots_span[index].classList.add("active");dotsBros.forEach(function(item){item.classList.remove("active");});// 图片切换isScroll = true;list.style.transform = "translateY(" + (-index * 399) + "px)";list.style.transition = "transform 0.5s";document.body.offsetHeight; // 强制重绘HTML
}

5. 当动画结束的时候,就要恢复 flag 变量的值为 flase,并且去掉图片的过渡动画。

// 动画结束时,恢复初始状态
list.addEventListener("transitionend",function(){isScroll = false;list.style.transition = "none";});

6. 滚动事件,判断滚轮值的正负,选择上还是下滚动图片。

// 鼠标滚轮事件
box.addEventListener("wheel",function(e){e.preventDefault();let delta = e.deltaY;if(delta > 0 && isScroll == false ){nextPic();}else if(delta < 0 && isScroll == false){prevPic();}
},{passive: false
});

 完整JS代码:

let box = document.getElementById("box");
let list = document.getElementById("list");
let dots = document.getElementById("dots");
let isScroll = false;let li = list.querySelectorAll("li");
let li_len = li.length;
let index = 0;
let wrap = document.createDocumentFragment();
// 初始化工作
for(let i = 0; i < li_len; i++){let span = document.createElement("span");span.dataset.index = i;if(i == 0){span.classList.add("active");}wrap.appendChild(span);span.addEventListener("click",function(){index = this.dataset.index;changePic(index);} );
}
dots.appendChild(wrap);
let dots_span = dots.children;
// 初始图片
let liFirst = li[0];
let liLast = li[li_len - 1];
let newLiFirst = liFirst.cloneNode(true);
let newLiLast = liLast.cloneNode(true);
list.appendChild(newLiFirst);
list.appendChild(newLiLast);
newLiLast.style.position = "absolute";
newLiLast.style.top = "-399px";
newLiLast.style.left = "0";
// 工具函数:获取兄弟节点
function findeBros(tag){let bros = [];let parent = tag.parentNode;for(let i = 0; i < parent.children.length; i++){if(parent.children[i] !== tag){bros.push(parent.children[i]);}}return bros;
}
// 图片切换函数:index++
function nextPic(){index++;if( index >= li_len ){index = 0;list.style.transform = "translateY(399px)"; // 调整list位置document.body.offsetHeight; // 强制重绘HTML}changePic(index);
}// 图片切换函数:index--function prevPic(){index--;if( index < 0 ){index = li_len - 1;list.style.transform = "translateY(" + (-399*li_len) + "px)";document.body.offsetHeight; // 强制重绘HTML}changePic(index);
}// 切换图片
function changePic(index){// 点的切换let dotsBros = findeBros(dots_span[index]);dots_span[index].classList.add("active");dotsBros.forEach(function(item){item.classList.remove("active");});// 图片切换isScroll = true;list.style.transform = "translateY(" + (-index * 399) + "px)";list.style.transition = "transform 0.5s";document.body.offsetHeight; // 强制重绘HTML
}
// 动画结束时,恢复初始状态
list.addEventListener("transitionend",function(){isScroll = false;list.style.transition = "none";
});// 鼠标滚轮事件
box.addEventListener("wheel",function(e){e.preventDefault();let delta = e.deltaY;if(delta > 0 && isScroll == false ){nextPic();}else if(delta < 0 && isScroll == false){prevPic();}
},{passive: false
});

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            

这篇关于JavaScript练手小技巧:利用鼠标滚轮控制图片轮播的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1145851

相关文章

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传