zoukankan      html  css  js  c++  java
  • 轮播图的实现(自动和手动)

    动画实现轮播图的自动播放

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮播图练习</title>
        <style>
            @keyframes moves {
                0% {
                    left: 0px;
                }
    
                23% {
                    left: 0px;
                }
    
                33% {
                    left: -400px;
                }
    
                42% {
                    left: -400px;
                }
    
                53% {
                    left: -800px;
                }
    
                67% {
                    left: -800px;
                }
    
                80% {
                    left: -1200px;
                }
    
                90% {
                    left: -1200px;
                }
    
                100% {
                    left: -1600px;
                }
            }
    
            .window {
                position: relative;
                 400px;
                height: 200px;
                overflow: hidden;
                margin: 0 auto;
            }
    
            .move {
                position: absolute;
                top: 0;
                left: 0;
                 1600px;
                height: 200px;
                overflow: hidden;
                border: 1px solid #ccc;
                animation: moves 9s linear infinite;
            }
    
            .move img {
                float: left;
                 400px;
                height: 200px;
            }
        </style>
    </head>
    
    <body>
        <div class="window">
            <div class="move">
                <img src="images/lunbotu1.jpg" alt="">
                <img src="images/lunbotu2.jpg" alt="">
                <img src="images/touxiang1.jpg" alt="">
                <img src="images/touxiang2.jpg" alt="">
            </div>
        </div>
    </body>
    
    </html>

    手动点击实现轮播图的切换

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮播图练习</title>
        <style>
            .window {
                position: relative;
                 800px;
                height: 200px;
                overflow: hidden;
                margin: 0 auto;
            }
    
            .move {
                position: absolute;
                top: 0;
                left: 0;
                 3200px;
                height: 200px;
            }
    
            .move img {
                float: left;
                 400px;
                height: 200px;
            }
    
            .lBox {
                position: absolute;
                top: 40%;
                left: 10px;
                 50px;
                height: 50px;
                border: 4px solid pink;
                border-top: none;
                border-right: none;
                transform: rotate(45deg);
            }
    
            .rBox {
                display: none;
                position: absolute;
                top: 40%;
                right: 10px;
                 50px;
                height: 50px;
                border: 4px solid pink;
                border-left: none;
                border-bottom: none;
                transform: rotate(45deg);
            }
        </style>
    </head>
    
    <body>
        <div class="window">
            <div class="move">
                <img src="images/lunbotu1.jpg" alt="">
                <img src="images/lunbotu2.jpg" alt="">
                <img src="images/touxiang1.jpg" alt="">
                <img src="images/touxiang2.jpg" alt="">
                <img src="images/lunbotu1.jpg" alt="">
                <img src="images/lunbotu2.jpg" alt="">
                <img src="images/touxiang1.jpg" alt="">
                <img src="images/touxiang2.jpg" alt="">
            </div>
            <div class="lBox"></div>
            <div class="rBox"></div>
        </div>
        <script>
            //flag用于判断是否已到照片的最后一张
            var flag = 0;
            var lBox = document.querySelector(".lBox");
            var rBox = document.querySelector(".rBox");
            var move = document.querySelector(".move");
            var img = document.querySelectorAll("img");
            console.log(img.length);
            var length;
            //一张轮播图里显示的图的个数
            var num = 2;
            if (img.length % num == 0)
                length = img.length / num;
            else
                length = img.length / num + 1;
            lBox.addEventListener("click", function (e) {
                flag++;
                move.style.left = -800 * flag + 'px';
                if (flag == length - 1) {
                    lBox.style.display = 'none';
                    rBox.style.display = 'block';
                }
            });
            rBox.addEventListener("click", function (e) {
                flag--;
                move.style.left = -800 * flag + 'px';
                if (flag == 0) {
                    lBox.style.display = 'block';
                    rBox.style.display = 'none';
                }
            });
        </script>
    </body>
    
    </html>
  • 相关阅读:
    rdp远程Windows10连接不上的解决方案
    win10系统RuntimeBroker.exe进程占用大量cpu的解决方案
    win10磁盘管理中的“可用压缩空间大小”太小的解决方案
    修改windows10的默认字体为新宋体(并且容易区分小写l和数字1)
    WPS表格自动生成序号(不受增删影响)
    服务器CPU中的E3、E5的区别,及V2、V3、V5的区别
    屏蔽WPS广告
    解析腾讯视频真实地址
    qlv to mp4
    uefi + gpt 安装 Windows7(用Rufus制作U盘启动工具)
  • 原文地址:https://www.cnblogs.com/echol/p/14032355.html
Copyright © 2011-2022 走看看