JavaScript---图片操作大杂烩

最新推荐文章于 2022-12-20 17:30:40 发布

maidu_xbd

最新推荐文章于 2022-12-20 17:30:40 发布

阅读量128

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/maidu_xbd/article/details/101159779

版权

JavaScript 专栏收录该内容

65 篇文章 3 订阅

订阅专栏

1.图片切换

功能描述：可以通过按钮“上一张”“下一张”切换图片

代码如下：

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

<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
    <style>
    img {
        width: 250px;
        height: 150px;
    }

    #btn {
        width: 250px;
        text-align: center;
    }
    </style>
</head>

<body>
    <img src="img/img_01.jpg" alt="图片">
    <div id="btn">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
    <script>
    window.onload = function() {
        // 1. 获取需要的标签
        var img = document.getElementsByTagName("img")[0];
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");

        // 2. 监听按钮的点击
        var maxIndex = 5,
            minIndex = 1,
            currentIndex = minIndex;
        // 上一张
        prev.onclick = function() {
            if (currentIndex === minIndex) { // 边界值
                currentIndex = maxIndex;
            } else { // 正常情况
                currentIndex--;
            }

            img.setAttribute("src", "img/img_0" + currentIndex + ".jpg");
        };
        // 下一张
        next.onclick = function() {
            if (currentIndex === maxIndex) { // 边界值
                currentIndex = minIndex;
            } else { // 正常情况
                currentIndex++;
            }

            img.setAttribute("src", "img/img_0" + currentIndex + ".jpg");

            console.log(img.src);
        };
    }
    </script>
</body>

</html>

2.图片显示与隐藏

功能描述：通过点击按钮实现图片显示或隐藏功能

代码如下：

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

<head>
    <meta charset="UTF-8">
    <title>图片显示与隐藏</title>
</head>

<body>
    <button id="btn">隐藏</button>
    <img src="img/img_01.jpg" alt="">
    <script>
    window.onload = function() {
        // 1. 获取事件源和相关的元素
        var btn = document.getElementById("btn");
        var img = document.getElementsByTagName("img")[0];

        // 2.绑定事件
        btn.onclick = function() {
            // 3. 事件的驱动程序
            if (btn.innerText === "隐藏") {
                img.style.display = "none";
                btn.innerText = "显示";
            } else {
                img.style.display = "block";
                btn.innerText = "隐藏";
            }
        }
    }
    </script>
</body>

</html>

3.小图列表，大图显示

功能描述：点击小图，显示相应的大图标题和大图

代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图片册</title>
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
    }

    body {
        margin: 50px;
    }

    ul {
        list-style: none;
    }

    #box {
        width: 451px;
        border: 3px solid #ccc;
        padding: 5px;
    }

    #list {

        overflow: hidden;
    }

    ul li {
        float: left;
        margin-right: 10px;
    }

    ul li:last-child {
        margin-right: 0px;
    }

    ul li a img {
        width: 100px;
    }

    #big_img {
        width: 430px;
    }

    #desc {
        width: 430px;
        border-top: 2px solid #ccc;
        font-size: 18px;
        color: #7f7979;
        font-weight: bolder;
        padding: 5px 0px;
    }
    </style>
</head>

<body>
    <div id="box">
        <!-- 小图列表 -->
        <div id="list">
            <ul>
                <li>
                    <a href="images/1.JPG" title="大海">
                        <img src="images/1.JPG" alt="大海" />
                    </a>
                </li>
                <li>
                    <a href="images/2.JPG" title="田园">
                        <img src="images/2.JPG" alt="田园" />
                    </a>
                </li>
                <li>
                    <a href="images/3.JPG" title="夕阳">
                        <img src="images//3.JPG" alt="夕阳" />
                    </a>
                </li>
                <li>
                    <a href="images/4.JPG" title="小道">
                        <img src="images/4.JPG" alt="小道" />
                    </a>
                </li>
            </ul>
        </div>
        <!-- 大图展示 -->
        <div>
            <p id="desc">大海</p>
            <img id="big_img" src="images/1.JPG" alt="">
        </div>
    </div>
    <script>
    window.onload = function() {
        var bigImg = document.getElementById("big_img");
        var desc = document.getElementById("desc");
        var alist = document.getElementsByTagName("a")
        console.log(alist.length)

        for (var i = 0; i < alist.length; i++) {
            alist[i].onclick = function() {
                console.log(this)
                desc.innerHTML = this.title;
                bigImg.src = this.href;
                // 取消默认的a标签的href跳转
                return false;
            }
        }
    }
    </script>
</body>

</html>

4.关闭小广告

功能描述：点击右上角关闭图标，关闭图片显示

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

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div {
        position: relative;
        display: inline-block;
    }

    #close {
        position: absolute;
        right: 0px;
        top: 0px;
        cursor: pointer;
    }
    </style>
</head>

<body>
    <div id="box">
        <img id="icon" src="images/1.jpg" alt="" width="200">
        <img id="close" src="img/close.jpg" alt="" width="20">
    </div>
    <script>
    window.onload = function() {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var close = document.getElementById("close");

        // 2. 给事件源绑定事件
        close.onclick = function() {
            box.style.display = "none";
            // this.parentNode.style.display = "none";
        }
    }
    </script>
</body>

</html>

5.图标切换

功能描述：鼠标移入，切换图标，鼠标移出则回到移入前的图标

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

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <img id="logo" src="img/img1.jpg" alt="" width="258">
    <script>
    window.onload = function() {
        // 1. 获取需要的标签
        var logo = document.querySelector("#logo");
        // console.log(logo);

        // 2. 绑定事件
        logo.onmouseover = function() {
            console.log("鼠标进入图片");
            // logo.src = "img/img2.jpg";
            this.src = "img/img2.jpg";
            //console.log(this);
        };

        logo.onmouseout = function() {
            console.log("鼠标离开图片");
            this.src = "img/img1.jpg";
        };

        logo.onmousemove = function() {
            console.log("鼠标在图片上移动");
        }
    }
    </script>
</body>

</html>

6.鼠标划入划出-图片切换

功能描述：鼠标移入，切换图标

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

<head>
    <meta charset="UTF-8">
    <title>鼠标划入划出-图片切换</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #box {
        border: 1px solid #cccccc;

        width: 360px;
        height: 70px;

        padding-top: 360px;
        margin: 100px auto;

        background: url("images/01big.jpg") no-repeat;
    }

    ul {
        display: flex;
        justify-content: center;
        align-items: center;

        cursor: pointer;
    }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/05.jpg" alt=""></li>
        </ul>
    </div>
    <script>
    window.onload = function() {
        // 1. 获取需要的标签
        var box = document.getElementById("box");
        var allLi = box.getElementsByTagName("li");

        // 2. 监听鼠标的进入
        for (var i = 0; i < allLi.length; i++) {
            var sLi = allLi[i];
            sLi.index = i + 1;
            sLi.onmouseover = function() {
                console.log(this.index);
                box.style.background = 'url("images/0' + this.index + 'big.jpg") no-repeat';
            }
        }
    }
    </script>
</body>

</html>