js实现轮播图（淡入淡出效果）

原创

已于 2022-01-20 18:53:55 修改 · 4.1k 阅读

标签

#javascript #前端 #css

于 2022-01-20 18:30:13 首次发布

本文详细介绍了如何使用JavaScript和CSS实现淡入淡出效果的轮播图，包括自动播放、鼠标交互控制及图片动画切换效果。通过设置图片的opacity和absolute定位，配合定时器控制切换，达到轮播效果。

一、前言

说起轮播图，大家应该都不陌生，大部分网站的首页或者也是面试官的提问：你会写轮播图吗？都会见到它的存在。虽然实现起来也不是很困难，但是真正能写好的人也不多，这也是我写这个的原因，整理一下自己写的东西，也带着大家一起复习巩固。

二、轮播图实现效果

三、功能

1.实现自动播放

2.鼠标移入停止播放，按左右切换按钮或者点击分页器小圆点切换图片

3.图片实现淡入淡出的动画效果

四、实现代码

1.html+css部分代码

    <div class="banner">
        <!-- 图片部分 -->
        <div class="wrap">
            <div class="item">
                <img src="./img/02.jpg" alt="">
            </div>
            <div class="item">
                <img src="./img/01.gif" alt="">
            </div>
            <div class="item">
                <img src="./img/03.jpg" alt="">
            </div>
            <div class="item">
                <img src="./img/04.jpg" alt="">
            </div>
        </div>
        <!-- 分页器部分 -->
        <div class="pagenation">
            <div id="pagenation-item0"></div>
            <div id="pagenation-item1"></div>
            <div id="pagenation-item2"></div>
            <div id="pagenation-item3"></div>
        </div>
        <!-- 上一张下一张部分 -->
        <div class="goon"></div>
        <div class="goout"></div>
    </div>

 .banner {
            width: 700px;
            /* border: 1px solid red; */
            margin: 100px auto;

最低0.47元/天解锁文章