js图片轮播（淡入淡出）

最新推荐文章于 2021-06-08 16:51:02 发布

ICY___

最新推荐文章于 2021-06-08 16:51:02 发布

阅读量1.4k

点赞数 3

分类专栏： ICY___的js进阶文章标签：图片轮播

本文链接：https://blog.csdn.net/ICY___/article/details/86568577

版权

本文探讨了如何使用JavaScript实现图片轮播功能，重点在于淡入淡出的动画效果。通过计时器控制图片切换，同时对关键点进行了注释，力求讲解清晰易懂。欢迎读者留言交流，作者承诺会回复讨论。

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

关于图片轮播，有太多的方法去实现，不同的样式，用的主要思想也不同，但不管怎么说，图片轮播离不开计时器。

关于要注意的，要解释的，我都备注好了，说的可能不是很标准，但我尽量说的通俗，欢迎留言讨论，只要我看到的，都会回复的。

<!--  核心思想：利用层级关系 计时器和css3动画来实现这个功能完善的图片轮播案例 -->
<!-- 基本覆盖了轮播的所有功能  -->
<!-- 呈现方式：图片 按钮淡入淡出，循环轮播 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片轮播</title>
    <style>
        .div1 {
            position: relative;
            width: 600px;
            height: 400px;
        }

        .div1>img {
            position: absolute;
            width: 600px;
            height: 400px;
            transition: opacity 1s linear;

        }
        .div2{
            position: relative;
            width: 600px;
            height: 400px;
            margin: 100px auto;
        }
        .newop{
            opacity: 1;
        }
        .oldop{
            opacity: 0;
        }
        .point{
            position: absolute;
            z-index: 999;
            bottom: 20px;
            left: 40px;
            height: 13px;
        }
        .point>div{
            width: 13px;
            height: 13px;
            border: 1px solid white;
            background-color: transparent;
            box-sizing: border-box;