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

目录

一、前言

二、轮播图实现效果

三、功能

四、实现代码

 1.html+css部分代码

2.js主要代码

5、总结

---

一、前言

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

二、轮播图实现效果

 

 

三、功能

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>