利用JS写一个简单的轮播图

旺旺大肉包

于 2022-01-20 22:59:50 发布

阅读量769

点赞数 1

分类专栏： JavaScipt 文章标签： javascript css css3

本文链接：https://blog.youkuaiyun.com/Da_Bao_zi/article/details/122611924

版权

本文介绍如何利用JavaScript和CSS3创建一个简单的轮播图效果。通过动态改变图片的显示，结合CSS样式实现平滑过渡，达到视觉上的轮播效果。适合初学者了解JavaScript在动态效果中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>当前页面</title>
	<style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            list-style: none;
            position: relative;
            padding-left: 0;
        }

        .item {
            /*叠在一起	        */
            position: absolute;
            width: 100%;
            height: 100%;
            color: white;
            font-size: 50px;
            /*透明度*/
            opacity: 0;
            /*淡入淡出图片的效果*/
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-color: yellowgreen;
        }

        .item:nth-child(2) {
            background-color: red;

最低0.47元/天解锁文章