zoukankan      html  css  js  c++  java
  • 轮播图

    轮播图

    通过点击前进、后退按钮,来实现图片的切换~~


    1.代码:


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <style media="screen">
            * {
                margin: 0;
                padding: 0;
            }
    
            .wrap {
                width: 65px;
                margin: auto;
                position: relative;
            }
    
            .wrap img {
                position: absolute;
                /*z-index: 10;*/
            }
    
            input {
                border: 1px solid lightgray;
                width: 50px;
                height: 30px;
                border-radius: 5px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        <img src="img/1.png"/>
        <img src="img/2.png"/>
        <img src="img/3.png"/>
        <img src="img/4.png"/>
    </div>
    <input type="button" id="butLeft" name="name" value="◀︎">
    <input type="button" id="butRight" name="name" value="▶︎">
    </body>
    <script type="text/javascript">
        // 获取images元素生成字符串数组,字符串数组不能进行push pop splice 等操作
        // 所以要将它的值重新存放进一个数组中,后面有定义
        var images = document.getElementsByTagName('img');
        var butLeft = document.getElementById('butLeft');
        var butRight = document.getElementById('butRight');
    
        //获取变量index 用来为后面设置层级用
        var index = 1000;
    
        // 获取一个空的数组,用来存放images里面的字符串元素
        var imagess = [];
    
        // for循环用来给imagess数组赋值,并且改变数组中的元素的层级
        for (var i = 0; i < images.length; i++) {
            imagess[i] = images[i];
            var currentImage = imagess[i];
    
            // 当前图片的层级的设置,一轮for循环都为他们设置了初始的zIndex,图片越靠前,层级设置
            // 要求越高,所以用的是-i,这样图片会按顺序从第一张,第二张.....依次向下
            currentImage.style.zIndex = -i;
        }
    
        // 设置计数器count,执行一次点击事件(向左或者向右)count加1
        var count = 0;
    
        // 向左的点击事件
        butLeft.onclick = function () {
    
            // 从数组头部弹出一个图片元素
            var showFirst = imagess.shift();
    
            // 给弹出的这个图片元素设置层级,即 -1000+count,
            // 让层级相较其他元素是最小的,数组头部弹出的图片会显示在最底层
            showFirst.style.zIndex = -index + count;
    
            // 层级改变完成后再将他push进数组的尾部
            imagess.push(showFirst);
    
            // 点击一次加1,不用考虑具体的值,只需要有点击事件加 1
            count++;
        }
        // 向右点击事件
        butRight.onclick = function () {
    
            // 从imagess的尾部弹出一个元素,并赋值给showFirst
            var showFirst = imagess.pop();
    
            // 设置showFirst的层级为最大,1000+count ,这样他会显示在第一层
            showFirst.style.zIndex = index + count;
    
            // 层级改变之后将他在插入数组imagess的头部
            imagess.unshift(showFirst);
    
            // 点击一次加1
            count++;
        }
    </script>
    </html>


    2.效果图:




  • 相关阅读:
    如何让create-react-app锦上添花,满足实际需求?
    《漫画算法》笔记-下篇
    《漫画算法》笔记-上篇
    react + typescript 学习
    node http 模块 常用知识点记录
    vue 相关技术文章集锦
    读后感:数据结构与算法JavaScript描述
    css 揭秘-读书笔记
    vue-textarea 自适应高度
    消除浏览器对input的自动填充
  • 原文地址:https://www.cnblogs.com/Michelle20180227/p/8656209.html
Copyright © 2011-2022 走看看