弹性过渡圆形幻灯片

已于 2025-06-27 16:49:59 修改
阅读量632 收藏 13
点赞数 12
CC 4.0 BY-SA版权
文章标签： css css3 前端
于 2025-06-27 16:48:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148956546

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性过渡圆形幻灯片</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        
        .slider-container {
            position: relative;
            width: 500px;
            height: 500px;
            overflow: hidden;
            border-radius: 50%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .slider {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        .slide {
            min-width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            flex-shrink: 0;
        }
        
        .slide:nth-child(1) {
            background: linear-gradient(135deg, #FF9A9E 0%, #FAD0C4 100%);
        }
        
        .slide:nth-child(2) {
            background: linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%);
        }
        
        .slide:nth-child(3) {
            background: linear-gradient(135deg, #FFECD2 0%, #FCB69F 100%);
        }
        
        .slide:nth-child(4) {
            background: linear-gradient(135deg, #84FAB0 0%, #8FD3F4 100%);
        }
        
        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }
        
        .control-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .control-btn.active {
            background: white;
            transform: scale(1.2);
        }
        
        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.3);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        
        .prev {
            left: 20px;
        }
        
        .next {
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="slider-container">
        <div class="slider">
            <div class="slide">幻灯片 1</div>
            <div class="slide">幻灯片 2</div>
            <div class="slide">幻灯片 3</div>
            <div class="slide">幻灯片 4</div>
        </div>
        
        <button class="nav-btn prev">❮</button>
        <button class="nav-btn next">❯</button>
        
        <div class="controls">
            <button class="control-btn active"></button>
            <button class="control-btn"></button>
            <button class="control-btn"></button>
            <button class="control-btn"></button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const slider = document.querySelector('.slider');
            const slides = document.querySelectorAll('.slide');
            const controlBtns = document.querySelectorAll('.control-btn');
            const prevBtn = document.querySelector('.prev');
            const nextBtn = document.querySelector('.next');
            
            let currentIndex = 0;
            const slideCount = slides.length;
            
            function updateSlider() {
                slider.style.transform = `translateX(-${currentIndex * 100}%)`;
                
                controlBtns.forEach((btn, index) => {
                    btn.classList.toggle('active', index === currentIndex);
                });
            }
            
            function goToSlide(index) {
                currentIndex = (index + slideCount) % slideCount;
                updateSlider();
            }
            
            function nextSlide() {
                goToSlide(currentIndex + 1);
            }
            
            function prevSlide() {
                goToSlide(currentIndex - 1);
            }
            
            // 控制按钮点击事件
            controlBtns.forEach((btn, index) => {
                btn.addEventListener('click', () => {
                    goToSlide(index);
                });
            });
            
            // 导航按钮点击事件
            nextBtn.addEventListener('click', nextSlide);
            prevBtn.addEventListener('click', prevSlide);
            
            // 自动轮播
            let autoSlideInterval = setInterval(nextSlide, 3000);
            
            // 鼠标悬停时暂停自动轮播
            const sliderContainer = document.querySelector('.slider-container');
            sliderContainer.addEventListener('mouseenter', () => {
                clearInterval(autoSlideInterval);
            });
            
            sliderContainer.addEventListener('mouseleave', () => {
                autoSlideInterval = setInterval(nextSlide, 3000);
            });
            
            // 触摸事件支持
            let touchStartX = 0;
            let touchEndX = 0;
            
            sliderContainer.addEventListener('touchstart', (e) => {
                touchStartX = e.changedTouches[0].screenX;
            }, {passive: true});
            
            sliderContainer.addEventListener('touchend', (e) => {
                touchEndX = e.changedTouches[0].screenX;
                handleSwipe();
            }, {passive: true});
            
            function handleSwipe() {
                if (touchEndX < touchStartX - 50) {
                    nextSlide();
                }
                
                if (touchEndX > touchStartX + 50) {
                    prevSlide();
                }
            }
        });
    </script>
</body>
</html>

ziblog
关注
HTML5全屏可拖拽幻灯片切换实战教程
weixin_29323977的博客
07-06 811
htmltable {th, td {th {pre {简介：HTML5是一种增强网页交互性的标记语言，支持拖放功能和丰富的动画效果。本教程详细解析了如何利用HTML5、CSS3和JavaScript技术实现具有倾斜样式、可拖拽操作的全屏幻灯片切换效果。教程包括监听拖放事件、运用CSS3样式和布局、结合<figure>和标签以实现图文并茂的设计，以及使用JavaScript或jQuery库处理幻灯片逻辑。
前端轮播图carousel案例（带详细注释）
Dontla的博客
03-12 560
【代码】前端轮播图carousel案例（带详细注释）
优雅过渡：HTML+CSS+JS打造平滑淡入淡出轮播特效——现代化文字动效与平滑轮播完美结合方案
最新发布
qq_49729896的博客
07-25 1344
将上述功能整合处理就能得到视频中的组合效果。包括交互功能‌： 自动轮播（每5秒切换一次） 用户可以暂停和继续自动轮播 点击指示器可直接跳转到特定幻灯片 使用说明 页面加载后，轮播将自动开始播放 使用左右箭头按钮可手动切换幻灯片 点击底部的小圆点可直接跳转到对应的幻灯片 使用暂停/播放按钮可控制自动轮播功能。Body核心代码如下：<h1 class="typewriter">欢迎来到创意编程世界</h1>
Python100个库分享第36个—python-pptx(办公篇)
weixin_42636075的博客
07-18 991
本文介绍了Python办公自动化库python-pptx的基础使用教程。该库可用于创建和修改PowerPoint演示文稿，支持文本、图片、表格等多种元素操作。文章内容包括：库的简介与安装方法、基本幻灯片操作（如添加标题幻灯片）、常用布局类型介绍、文本格式设置（字体、颜色、对齐方式等）以及表格创建方法。通过具体代码示例，展示了如何利用python-pptx实现PPT自动化生成，帮助提高办公效率。适合需要批量处理PPT文件的Python开发者参考使用。
笔记：flutter中一些不错的 UI 相关库推荐（不断更新）
jclee95的个人博客
07-03 2万+
本文收录了很多在 flutter pub 上显示流行度较高的第三方UI库和UI框架，对它们的效果进行了截图，目的是方便开发时进行查找； 这些模块多数来自于 flutter pub 官方主页 Flutter Favorites、Most popular packages、Top Flutter packages 也有一些仅仅只 popularity 值比较高 本文给出了图片和链接，并不介绍各个模块的用法，需要使用的读者可以点击链接到对应库的页面查看
我用这 18 个神奇的库，美化了我的项目，真是亮瞎我的眼！
粉丝们务必加入微信粉丝群
09-30 478
作者：Chimezie Enyinnaya 译者：前端小智 来源：blog 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 上代码。。。。。。。。。。 1. Lottie-Web/Bodymovin github 地址：https://github.com/airbnb/lottie-web 从我最喜欢的资源库开始。有了.
分享99个JS幻灯片代码，总有一款适合您
zy0412326的专栏
02-07 1770
js幻灯片
android安卓源码海量项目合集打包-1
热门推荐
chenhao0568的专栏
06-11 15万+
下载地址 最后更新共计113个分类5177套源码29.2 GB。 卷 新加卷 的文件夹 PATH 列表 卷序列号为 00000200 5E7A:7F30 F:. ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签的灵活运用.rar │ │ Android 实现 标签 拖动 改变位置.rar │ │ android 流式布局和热门标签.zip │ │ ...
JS、JQuery、CSS+DIV实例大全
yjxfox的专栏
10-19 5093
(注意：本资源共约300个应用实例，以下是详细目录) 一、J Query实例大全 1)AjaxJavaScript资源 1.JS+CSS仿腾讯QQ首页搜索框无刷新换肤效果代码 2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例
弹性过渡圆形幻灯片特效制作教程
结合这些知识点，我们可以理解给定文件描述的“炫酷弹性过渡效果的圆形幻灯片特效”不仅仅是一个视觉元素，更是一个集成了用户界面设计、前端开发技术、动画过渡以及用户体验优化的综合解决方案。它通过动态的视觉...
html5实现的弹性过渡效果的圆形幻灯片源码.zip
11-04
在本资源"html5实现的弹性过渡效果的圆形幻灯片源码.zip"中，我们可以看到HTML5如何被用来创建一个具有弹性过渡效果的圆形幻灯片展示。下面将详细讲解这个主题相关的知识点。 首先，HTML5的新特性之一是Canvas元素...
炫酷弹性过渡效果的圆形幻灯片特效
12-11
《炫酷弹性过渡效果的圆形幻灯片特效——基于jQuery库的创新实现》 在网页设计与开发领域，用户体验和视觉吸引力是至关重要的元素。"炫酷弹性过渡效果的圆形幻灯片特效"是由知名资源网站codrops推出的一款创新性的...
实现弹性过渡圆形幻灯片的前端代码下载
资源摘要信息: "弹性过渡效果的圆形幻灯片代码.zip" 知识点概述: 该资源包中的文件涉及到了前端开发中的几个重要技术领域，包括HTML5、jQuery、JavaScript和CSS。核心功能是实现具有弹性过渡效果的圆形幻灯片，这是...
弹性过渡圆形幻灯片HTML5源码实现
资源摘要信息:"html5实现的弹性过渡效果的圆形幻灯片源码.zip" 知识点一：HTML5简介 HTML5是第五代超文本标记语言，是构建和呈现网页内容的主要语言。HTML5的引入不仅是为了增强现有的网页表现，还旨在引入新的元素...
element-plus 组件 ElMessage、ElLoading 弹框 和加载css 样式展示异常总结
_1531613221
07-24 287
本文总结了解决Vue3+TS项目中Element Plus组件引入问题的三种方案：1)删除手动引入后可能出现报错但项目可运行；2)修改vite.config.ts配置，调整AutoImport设置解决组件不显示问题；3)推荐安装sass-embedded解决CSS样式异常。方案二详细提供了vite配置代码，包括自动导入样式文件和API式组件的处理；方案三强调需优先安装sass-embedded。三种方案逐步深入，最终彻底解决组件引入和样式问题。
17. 如何修改 flex 主轴方向
weixin_64684095的博客
07-25 639
在 Flex 布局中，默认的主轴（main axis）方向是 水平向右（即 ）。 通过设置 属性，可以灵活改变主轴的方向，从而控制子元素的排列方式。
【前端】当前主流的 CSS 预处理器语言Sass / SCSS、Less、Stylus
qq_45974648的博客
07-23 1123
当前主流的 ​CSS 预处理器语言​ 主要有以下几种：Sass / SCSS、Less、Stylus，它们都通过提供变量、嵌套、混入、函数等强大功能来增强原生 CSS，提升开发效率和可维护性
CSS图片分层设置
HappyAcmen
07-23 236
在CSS中实现图片分层效果，主要通过和控制。
CSS 基础
qq_68630091的博客
07-23 858
设置某一个方向的边框：border-top: 1px solid #000；设置边框：border：1px solid #000；写在独立的.css 文件中，在html 文件中引入外部的.css 文件。写在 head 标签中的 style 标签里，对当前页面所有元素生效。text-align ：设置块级元素内文本的水平对齐方式。解决方案：给父元素设置 overflow:hidden；边框圆角： border-radius: 100px；特点：随着当前页面加载而加载，加载速度快，首页常用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值