案例｜原生手写一个轮播图——渐隐渐显版

最新推荐文章于 2023-03-03 15:44:59 发布

只为编程

最新推荐文章于 2023-03-03 15:44:59 发布

阅读量463

点赞数

本文链接：https://blog.csdn.net/weixin_48119069/article/details/107064388

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个渐隐渐显的自动轮播图，包括自动播放、鼠标悬停暂停、左右箭头切换、分页器跳转等功能。通过实例代码和需求解析，展示了轮播图的完整实现过程。

摘要由CSDN通过智能技术生成

今天我们自己手写一个渐隐渐显版的轮播图，先上效果图👇

由于文件太大，只能压缩成这样给大家看了😓

既然不能传大文件，那大家就委屈一下先听听小编我描述一下具体的需求吧😄

一、需求

❝
1、实现渐隐渐显自动轮播效果；
❞

就如上面效果图一样；

❝
2、鼠标划上：

显示左右切换箭头

停止自动轮播；

❞

如图：此时小芝麻鼠标在图上，所以显示左右箭头，并且不再自动轮播

❝
3、鼠标离开:

隐藏左右切换箭头

继续自动轮播；

❞

与👆效果图一致

❝
4、点击左右箭头实现上下切换图片
❞

如图：

❝
5、点击分页器跳转相应图片
❞

如图：小芝麻点击了第三个分页器，娜美就出来了😄

好了现在需求已经提完了，开始我们表演的时候到了

二、代码实现

HTML

结构中我们需要：

图片容器
- 这里小芝麻放了6张图片着实有点多，但看见哪一张都舍不得删😭所以看着有些乱；
- 小伙伴们可根据自己的需求调整
分页器容器
左右按钮容器

即可

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>金色小芝麻—渐隐渐显版轮播图-原生</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 轮播图容器 -->
    <div class="container">
        <!-- WRAPPER存放所有的图 -->
        <div class="wrapper">
            <!-- SLIDER每一个轮播图 -->
            <div class="slider">
                <img src="images/banner1.jpg" alt="">
            </div>
            <div class="slider">
                <img src="images/banner2.jpg" alt="">
            </div>
            <div class="slider">
                <img src="images/banner3.jpeg"