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

最新推荐文章于 2023-03-01 16:04:18 发布

旺旺大肉包

最新推荐文章于 2023-03-01 16:04:18 发布

阅读量729

点赞数 1

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

本文链接：https://blog.csdn.net/Da_Bao_zi/article/details/122611924

版权

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

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

<!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;