图片切换的练习

Posted stu-jyj3621

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片切换的练习相关的知识,希望对你有一定的参考价值。

技术图片

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: greenyellow;
            /* 设置文本居中 */
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            // 点击按钮切换图片,就是要修改img标签道德src属性

            // 获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            // 获取img标签
            var img = document.getElementsByTagName("img")[0];

            // 创建一个数组,用来保存图片的路径
            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]

            //创建一个变量,来保存当前正在显示图片的索引
            var index = 0;

            // 获取id为info的p元素
            var info = document.getElementById("info");

            //分别为两个按钮绑定单击响应函数
            prev.onclick = function () {
                // alert("上一张");

                // 切换到上一张,索引自减
                index = (index - 1) % imgArr.length;
                img.src = imgArr[index];
                // 设置提示文字
                info.innerHTML = "一共 " + imgArr.length + " 张图片" + ",当前第 " + (index + 1) + "";
            }

            next.onclick = function () {
                // alert("下一张");
                // 要修改一个元素的属性 元素.属性 = 属性值
                // 切换到上一张,索引自增
                index = (index + 1) % imgArr.length;
                img.src = imgArr[index];
                info.innerHTML = "一共 " + imgArr.length + " 张图片" + ",当前第 " + (index + 1) + "";
            }
        }
    </script>
</head>

<body>

    <div id="outer">
        <p id="info">一共 5 张图片,当前第 1 张</p>
        <img src="img/1.jpg" />
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

</html>

 技术图片

1.jpg

 技术图片

2.jpg

 技术图片

3.jpg

 技术图片

4.jpg

 技术图片

 5.jpg

 

以上是关于图片切换的练习的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript练习--[使用js语言实现网页切换图片的效果]

图片切换的练习

图片切换(练习)

练习鼠标悬停切换图片页面

jQuery的prop和attr练习切换图片

JavaScript练习---[JS动态切换图片效果;JS完成简易计算器, 下拉框切换头像, JS 制作简易文本编辑器]