原生js+css3实现图片自动切换，图片轮播

最新推荐文章于 2024-07-16 19:35:54 发布

pspgbhu

最新推荐文章于 2024-07-16 19:35:54 发布

阅读量1.1w

点赞数 1

分类专栏： Web前端 javascript 文章标签： css3 动画轮播 transition opacity

本文链接：https://blog.csdn.net/pspgbhu/article/details/51465537

版权

本文介绍如何利用CSS3的transition和opacity属性，结合JavaScript，创建一个图片轮播动画。通过调整图片的透明度和过渡效果，实现平滑的轮播效果。文章还提及了实际应用中遇到的问题，如定位问题和不同分辨率下的适应性，并提供了修正后的代码示例。

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

运用CSS3transition及opacity属性制作图片轮播动画

自己这两天根据用js来控制触发CSS3中transition属性，从而写出来的以CSS3动画为基础，js控制过程的图片轮播

运用css3的opacity透明度属性和transition动画过度属性，用js对过程加以控制，也实现了js对CSS3中transition动画的触发

实例链接地址：http://pspgbhu.github.io/opacity

今天突然发现这个代码有问题，主要出在html/css上，问题主要是由于使用了position：absolute定位，同时banner这个div中又没有其他元素，因此这个div就无法被正确的撑开，为我们的页面布局带来了困扰。
再其次的问题是，这个轮播图主要意图是用于页面顶部的巨大的横幅广告，但是在写代码时并没有考虑到面对不同分辨率情况下的展现效果，因此还有许多改良的空间。

想了想还是不把之前有问题的代码删掉了，正确代码在最后面

这是之前有问题的代码:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>图片自动切换 图片轮播</title>
        <style type="text/css">
            /*注意 第一张图片z-index值是5，后面的图片值为1*/
            *{
    margin: 0;padding: 0;}
            .banner {
                width: 1920px;
                height: 493px;
                position: relative;
            }

            .banner_slide_1 {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                transition: opacity 0.5s;
                opacity: 1;
                z-index: 5;
            }

            .banner_slide_2 {
                position: absolute;
                top: 0;
                left: 0;
                display: none;
                transition: opacity 0.5s;
                opacity: 0;
                z-index: 1;
            }

            .banner_slide_3 {
                position: