轮播图修炼

wuliang_berry
150 阅读1分钟

轮播图demo1

  • 通过a标签绑定id锚点跳转
  • :target伪类知识点，因为只有img的a区域可展示，其他img默认都是display:none,这里通过:target获取选中的图片将其设置成display: block;
<!-- 示例1：lunboDemo1.html -->
<!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 type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        img {
            width: 300px;
            height: 300px;
            position: absolute;
        }

        .href {
            position: absolute;
            z-index: 1;
            top: 270px;
            left: 150px;
            transform: translateX(-50%);
        }

        /* a标签是内联元素，设置宽高无效，可以将a转换成行内块，或者直接加个浮动宽高就会生效 */
        .href a {
            width: 20px;
            height: 10px;
            border: white solid 5px;
            border-radius: 8px;
            margin-right: 15px;
            display: inline-block;
        }

        .href a:hover {
            background-color: white;
        }

        .images {
            position: relative;
        }

        .im {
            display: none;
        }

        /* :target是css3的伪类目标选择器，URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素*/
        /* 比如：http://127.0.0.1:8080/lunboDemo1.html#b  那么:target就会匹配到锚点b元素 */
        :target {
            display: block;
        }
    </style>
</head>
<body>
    <div class="href">
        <a href="#a"></a>
        <a href="#b"></a>
        <a href="#c"></a>
        <a href="#d"></a>
        <a href="#e"></a>
    </div>
    <div class="images">
        <img src="https://picsum.photos/id/10/480/360" id="a">
        <img src="https://picsum.photos/id/11/480/360" id="b" class="im">
        <img src="https://picsum.photos/id/12/480/360" id="c" class="im">
        <img src="https://picsum.photos/id/13/480/360" id="d" class="im">
        <img src="https://picsum.photos/id/14/480/360" id="e" class="im">
    </div>
</body>
</html>

轮播图demo2

  • 备注1：在父元素中添加font-size：0px去重两个子块之间水平间隙
  • 备注2：cursor: pointer; ✋指针
  • 备注3：最终在设置img的宽高100%，继承父元素的宽高
  • 备注4：
1. label标签的for属性绑定input标签的id属性或者name属性达到联动效果；
2. 也就是点击某个label标签时，这个label标签for绑定的input标签就会被选中；
3. 这个相当于模拟了轮播图demo1的a标签点击锚点跳转的效果。
  • 备注5： input需要和slide同级，并且input要出现在slide前面；因为这里用到了#r2:checked~.s1选择器，表示r2被选中时，r2之后的同级选择器.s1,然后对样式做点什么；这个点很重要。

总体表现是：点击下面的某个label联动到对应的input被选中，input被checked，触发#r2:checked~.s1选择器，然后对做样式处理

<!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 type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            background-color: #34495e;
        }

        .slidershow {
            width: 480px;
            height: 360px;
            overflow: hidden;
        }

        .middle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .navigation {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .bar {
            width: 30px;
            height: 5px;
            border: 2px solid white;
            display: inline-block;
            margin-right: 5px;
            cursor: pointer;
            transition: 0.6s;
        }

        .bar:hover {
            background-color: #fff
        }

        input[name="r"] {
            position: absolute;
            visibility: hidden;
        }

        .slides {
            width: 500%;
            height: 100%;
            font-size: 0px;
            /* display: flex; */
        }

        .slide {
            width: 20%;
            display: inline-block;
            /* float: left; */
            transition: 0.6s;
        }

        .slide img {
            width: 100%;
            height: 100%;
        }

        #r1:checked~.s1 {
            margin-left: 0;
        }

        #r2:checked~.s1 {
            margin-left: -20%;
        }

        #r3:checked~.s1 {
            margin-left: -40%;
        }

        #r4:checked~.s1 {
            margin-left: -60%;
        }

        #r5:checked~.s1 {
            margin-left: -80%;
        }
    </style>
</head>

<body>


    <div class="slidershow middle">
        <div class="slides">
            <input type="radio" name="r" id="r1" checked>
            <input type="radio" name="r" id="r2">
            <input type="radio" name="r" id="r3">
            <input type="radio" name="r" id="r4">
            <input type="radio" name="r" id="r5">

            <div class="slide s1"><img src="https://picsum.photos/id/10/480/360"></div>
            <div class="slide"><img src="https://picsum.photos/id/11/480/360"></div>
            <div class="slide"><img src="https://picsum.photos/id/12/480/360"></div>
            <div class="slide"><img src="https://picsum.photos/id/13/480/360"></div>
            <div class="slide"><img src="https://picsum.photos/id/14/480/360"></div>
        </div>
        <div class="navigation">
            <label for="r1" class="bar"></label>
            <label for="r2" class="bar"></label>
            <label for="r3" class="bar"></label>
            <label for="r4" class="bar"></label>
            <label for="r5" class="bar"></label>
        </div>
    </div>


</body>

</html>

demo2效果

轮播图demo3(js动态+自动切换)

  • 动态轮播图借助opacity属性实现，将图片绝对定位之后全部重叠在一起，配置当前点击current，设置当前的current的opacity:1显示当前图片，不是current图片的都是全透明opacity:0
  • 获取dom的classList，这个属性时只读的，可以通过remove()和add()进行去除和添加
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .image-slider {
            width: 100vw;
            height: 100vh;
        }

        .image-slider .slide {
            width: 100%;
            height: 100%;
            position: absolute;
            transition: all linear 0.6s;
        }

        .image-slider .slide img {
            width: 100%;
            height: 100%;
        }

        #prev,
        #next {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 40px;
            color: #fff;
            font-size: 48px;
            background-color: rgba(0, 0, 0, 0.6);
            top: calc(50% - 50px);
            text-align: center;
            line-height: 80px;
            cursor: pointer;
            transition: all linear 0.3s;
        }

        #prev:hover,
        #next:hover {
            color: black;
            background-color: rgba(255, 255, 255, 0.6);
        }

        .turn-left {
            left: 50px;
        }

        .turn-right {
            right: 50px;
        }

        .image-slider .slide {
            opacity: 0;
        }

        .image-slider .slide.current {
            opacity: 1;
        }
    </style>
</head>

<body>
    <header>
        <div class="image-slider">
            <div class="slide current"><img
                    src="https://images.pexels.com/photos/219692/pexels-photo-219692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt=""></div>
            <div class="slide"><img
                    src="https://images.pexels.com/photos/1519088/pexels-photo-1519088.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
                    alt=""></div>
            <div class="slide"><img
                    src="https://images.pexels.com/photos/1449455/pexels-photo-1449455.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt=""></div>
            <div class="slide"><img
                    src="https://images.pexels.com/photos/1470405/pexels-photo-1470405.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
                    alt=""></div>
            <div class="slide"><img
                    src="https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    alt=""></div>
        </div>
        <div id="prev" class="turn-left"><i class="fas fa-chevron-left"></i></div>
        <div id="next" class="turn-right"><i class="fas fa-chevron-right"></i></div>

    </header>
    <script>
        const prev = document.querySelector('#prev')
        const next = document.querySelector('#next')

        let autoPlay = true
        let forward = true

        prev.addEventListener('click', prevHandle)
        next.addEventListener('click', nextHandle)
        
        // 自动播放
        autoPlay && setInterval(forward ? nextHandle : prevHandle, 6000);

        let currentIndex = 0

        function nextHandle() {
            let slides = document.querySelectorAll('.slide')
            let currentSlide = slides[currentIndex]
            currentSlide.classList.remove('current');
            ++currentIndex;
            if (currentIndex >= slides.length) currentIndex = 0
            slides[currentIndex].classList.add('current')
        }

        function prevHandle() {
            let slides = document.querySelectorAll('.slide')
            let currentSlide = slides[currentIndex]
            currentSlide.classList.remove('current');
            --currentIndex;
            if (currentIndex < 0) currentIndex = slides.length - 1
            slides[currentIndex].classList.add('current')
        }
    </script>
</body>
</html>
avatar
文章
阅读
粉丝