焦点图(轮播图)的实现及详解

实际实现代码，包含思路即实现过程(这里设计的目的是应对N张图片的，如果需要实现N张图片的动态效果，只需要在上一张下一张以及轮播图函数(自动翻页的下一张)中在修改了类名后将旧地址进行更新即可：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Slider</title></head><style>* {margin: 0;padding: 0;box-sizing: border-box;}.img-container {margin: 20px auto;display: flex;align-items: center;overflow: hidden;position: relative;justify-content: center;}img {position: absolute;transition: all 0.3s ease-in-out;height: 100%;}</style><body><div class="img-container"><imgclass="previous"src="./img/中岛美雪.png"alt=""srcset=""h="362"w="578"/><imgh="1200"w="1920"class="current"src="./img/华盛顿北瀑布国家公园.jpg"alt=""srcset=""/><img h="640" w="640" class="next" src="./img/星空.jpg" alt="" srcset="" /></div><button class="prev">Previous</button><button class="nex">Next</button></body><script>/*思路:这里设置三个图片,分别是上一张,当前,下一张(previous,current,next),它们均为绝对定位，父容器为相对定位。current是当前实际显示的图片，默认left和right都为0，previous默认right为100%，next的left为100%。我们通过设置current的left和right来实现图片的切换，当我们选择上一张时，current的left渐变为100%,而previous的left渐变为0。next的right直接变为100%。当我们选择下一张是只需反过来即可，此时需要注意当动画结束后需要对于previous，current，next的left和right进行重置(元素的类名先变而后选择器重置)，以便下一次动画。 */const container = document.querySelector('.img-container');let previous = document.querySelector('.previous');let next = document.querySelector('.next');let current = document.querySelector('.current');let prevBtn = document.querySelector('.prev');let nextBtn = document.querySelector('.nex');/*如果current高度大于600则使用600作为容器高度否则则采用图片的高度这里为了保证图片不会失真，我们将实际高度比上图片的高度获取实际缩放比，将其与图片原始宽度相乘得到最佳实际宽度*/let height = getHeight(current) > 600 ? 600 : getHeight(current);let width = (height / getHeight(current)) * getWidth(current);let autoTimer;//默认将容器的宽度和高度设置为current的宽度和高度container.style.height = `${height}px`;container.style.width = `${width}px`;//设置默认值previous.style.right = `100%`;next.style.left = `100%`;//创建自动轮播的效果，默认时间时三秒一换，这里使用一个函数将其包含以便调用const auto = function () {//设置实际的轮播定时器autoTimer = setInterval(() => {current.style.right = `0%`;const timer = setInterval(() => {if (getLeftValue(next) <= 0) {clearInterval(timer);let height = getHeight(next) > 600 ? 600 : getHeight(next);let width = (height / getHeight(next)) * getWidth(next);container.style.height = `${height}px`;container.style.width = `${width}px`;previous.classList.remove('previous');previous.classList.add('next');current.classList.remove('current');current.classList.add('previous');next.classList.remove('next');next.classList.add('current');previous = document.querySelector('.previous');next = document.querySelector('.next');current = document.querySelector('.current');previous.removeAttribute('style');next.removeAttribute('style');previous.style.right = `100%`;next.style.left = `100%`;return;}next.style.left = `${getLeftValue(next) - 10}%`;current.style.right = `${getRightValue(current) + 10}%`;}, 10);}, 3000);};//页面加载后默认直接调用自动轮播函数auto();prevBtn.addEventListener('click', () => {//点击上一张和下一张时清除自动轮播的定时器clearInterval(autoTimer);//我们必须先设置一个默认值否则会导致显示的异常，因为默认它是没有设置left和right的current.style.left = `0%`;const timer = setInterval(() => {//当current的left等于0时停止动画，这里的动画设置的默认时长为10*10msif (getLeftValue(current) === 100) {clearInterval(timer);//将容器设置为上一张的宽度和高度，因为这里是上一张，因此此时上一张即为当前实际显示的图片let height = getHeight(previous) > 600 ? 600 : getHeight(previous);let width = (height / getHeight(previous)) * getWidth(previous);container.style.height = `${height}px`;container.style.width = `${width}px`;//重置类名previous.classList.remove('previous');previous.classList.add('current');current.classList.remove('current');current.classList.add('next');next.classList.remove('next');next.classList.add('previous');//重置选择器previous = document.querySelector('.previous');next = document.querySelector('.next');current = document.querySelector('.current');//去除冗余的样式previous.removeAttribute('style');next.removeAttribute('style');previous.style.right = `100%`;next.style.left = `100%`;auto();return;}//动画效果previous.style.right = `${getRightValue(previous) - 10}%`;current.style.left = `${getLeftValue(current) + 10}%`;}, 10);});nextBtn.addEventListener('click', () => {clearInterval(autoTimer);current.style.right = `0%`;const timer = setInterval(() => {if (getLeftValue(next) <= 0) {clearInterval(timer);let height = getHeight(next) > 600 ? 600 : getHeight(next);let width = (height / getHeight(next)) * getWidth(next);container.style.height = `${height}px`;container.style.width = `${width}px`;previous.classList.remove('previous');previous.classList.add('next');current.classList.remove('current');current.classList.add('previous');next.classList.remove('next');next.classList.add('current');previous = document.querySelector('.previous');next = document.querySelector('.next');current = document.querySelector('.current');previous.removeAttribute('style');next.removeAttribute('style');previous.style.right = `100%`;next.style.left = `100%`;auto();return;}next.style.left = `${getLeftValue(next) - 10}%`;current.style.right = `${getRightValue(current) + 10}%`;}, 10);});//鼠标移入移出时清除和设置自动轮播的定时器container.addEventListener('mouseenter', () => {clearInterval(autoTimer);//鼠标移移出时重启自动轮播，注意为了避免同一次移出造成mouseleave的重复调用，每次调用mouseleave时先清除定时器current.addEventListener('mouseleave', () => {clearInterval(autoTimer);auto();});});function getWidth(img) {return parseInt(img.getAttribute('w'));}function getHeight(img) {return parseInt(img.getAttribute('h'));}function getLeftValue(ele) {if (ele.style.left === '') return 0;return parseInt(ele.style.left.replace('%', ''));}function getRightValue(ele) {if (ele.style.right === '') return 0;return parseInt(ele.style.right.replace('%', ''));}</script>
</html>

焦点图(轮播图)的实现及详解相关推荐

android画廊效果的轮播图,轮播图（3d画廊效果）
首先需要将轮播图的依赖导入 implementation 'com.github.xiaohaibin:XBanner:1.6.1' 接下来就是在项目目录下bulidgradle中导入(allproj ...
php详情页图片尺寸,拼多多主图轮播图详情页图片尺寸要求大全
1.拼多多商品轮播图: a. 尺寸宽度和高度都需要大于等于480px,正方形最好. b. 大小1M以内,不能超过1M. c. 数量限制在10张以内,等于10章. d. e. 主轮播图背景为纯白色(服饰 ...
qt 动画顺序轮播图轮播图
Show time! 简单来说,就是一个轮播图. 切换的时候是有动画的. 点击下面的按钮可以切换动画. 图片可以是很多张很多张的,但显示在窗口上的只有三张,但它们的顺序是不会变的. 如果能直接有qml ...
封装运动函数左右切换版本轮播图
运动函数需求: 当我点击 div 的时候, 让 div 定位到 left: 200px 的位置 1. 获取元素 2. 给元素绑定一个点击事件 3. 在点击事件里面, 给元素设置定位 3改. 调用运动 ...
案例——封装一个轮播图插件
说起插件,可能很多人搞不清楚插件和类库.组件.框架的区别,在这里,我先来简单的聊一聊它们之间的区别和联系类库提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的 ...
html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
vant 里面找不到轮播图_5分钟搞定，高逼格动态LOGO图
今天分享一套闪图轮播图的制作方式闪图和轮播图一直是清新派小编的最爱 <回忆杀>系列,没问题 ↓↓↓ 网红打卡的,没问题 ↓↓↓ 文化.旅游再来一组大号的『需要的工具』 ①在线作图网 ...
WebAPI第四天学习总结—— 常见网页特效案例（轮播图、节流阀、返回顶部、筋斗云案例）
常见网页特效案例案例:网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效. 效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往 ...
2021-3-2打砖块游戏，轮播图，swiper，自执行函数
文章目录打砖块测试碰撞完全体轮播图轮播图缓冲缓冲测试 swiper 自执行函数打砖块 <!DOCTYPE html> <html lang="en" ...

焦点图(轮播图)的实现及详解

焦点图(轮播图)的实现及详解相关推荐

最新文章

热门文章