实现轮播图透明度切换+自动走

最新推荐文章于 2023-06-15 08:45:13 发布

Ylk_IT

最新推荐文章于 2023-06-15 08:45:13 发布

阅读量274

点赞数

本文链接：https://blog.csdn.net/ylk_manong/article/details/118613188

版权

本文介绍了如何实现轮播图的透明度切换效果，并结合自动播放功能，提供了一个实现方案，包括CSS样式、HTML结构和JavaScript代码示例。

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

实现轮播图透明度切换+自动走

style部分

<style>
        li{
   list-style: none;}
        *{
   margin:0; padding:0;}
        .banner{
   
            width: 590px;
            height: 470px;
            margin: 50px auto;
            border: 2px solid green;
            position: relative;
        }
        .banner li{
   
            width: 590px;
            height: 470px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: opacity 1s linear; 
        }
        .banner li:nth-of-type(1){
   
            opacity: 1;
        }
        .banner li img{
   
            width: 590px;
            height: 470px;
        }
        #page{
   
            position: absolute;
            left: 30px;
            bottom: 20px;
            overflow: hidden;
        }
        #page span{
   
            float: left;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #ccc;
            font-size: 12px;
            line-height: 20px;
            text-align: center;
            margin:0 4px;
        }
        #page span:nth-of-type(1){
   
            background: red;
        }
        #btn_left{
   
            width: 40px;
            height: 60px;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            left: 0;
            background: rgba(0,0,0,0.5);
            color: #fff;
            text-align: center;
            line-height: 60px;
        }
        #btn_right{
   
            width: 40px;
            height