JS透明度和水平轮播源码

最新推荐文章于 2022-09-26 21:14:30 发布

hr226

最新推荐文章于 2022-09-26 21:14:30 发布

阅读量168

点赞数

文章标签： JS透明度和水平轮播

本文链接：https://blog.csdn.net/hr226/article/details/106268940

版权

JS透明度轮播

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }

        ul {
   
            list-style: none;
        }

        .slider {
   
            width: 700px;
            height: 400px;
            border: 5px solid crimson;
            position: relative;
        }

        .slider .list .item {
   
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        .slider .list .item:first-of-type {
   
            opacity: 1;
        }

        .slider .list .item img {
   
            width: 700px;
            height: 400px;
            display: block;
        }

        .slider .next,
        .slider .prev {
   
            position: absolute;
            top: 190px;
        }

        .slider .next {
   
            right: 0;
        }

        .slider .pagination {
   
            position: relative;
            top: 300px;
        }

        .slider .pagination .bullet {
   
            width: 20px;
            height: 20px;
            background-color: #000;
            margin-left: 5px;
            float: left;
            border: 2px solid yellow;
            cursor: pointer;
            color: white;
            line-height: 20px;
            text-align: center;
        }

        .slider .pagination .bullet.focus {
   
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="slider">
        <ul class="list">
            <li class="item"><img src="img(1).jpg" alt=""></li>
            <li class="item"><img src="img(2).jpg" alt=""></li>
            <li class="item"><img src="img(3).jpg" alt=""></li>
            <li class="item"><img src="img(4).jpg" alt=""></li>
        </ul>
        <button class="prev">prev</button>
        <button class="next">next</button>
        <ul class="pagination">
            <li class="bullet focus">1</li>
            <li class="bullet">2</li>
            <li class="bullet">3</li>
            <li class="bullet">4</li>
        </ul>
    </div>
    <script>
        function getStyle(el, property) {
   
            if (getComputedStyle) {
   
                return getComputedStyle(el)[property];
            } else {
   
                return el.currentStyle[property];

最低0.47元/天解锁文章

hr226

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS透明度和水平轮播源码

JS透明度轮播<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫