js实现简单图片切换

本文实例为大家分享了JavaScript实现图片间切换的具体代码,供大家参考,具体内容如下

代码的主要思路:

1、先给“下一张”和“上一张”两个按钮绑定单击响应事件;
2、获取img标签对象,用于修改src属性的值,实现图片的切换;
3、切换图片实质上就是修改img标签里面src属性的值;
4、创建一个数组用来保存图片,这样的话,在图片切换的过程中操作起来会更加方便,只要操作数组的索引即可,如要切换到下一张,将imgArr[0]—->imgArr[1],即可;
5、创建一个变量用来保存当前正在显示的图片的索引,这样操作图片更加简单;
6、需要注意的是,如果当前显示的图片为最后一张时,下一张使它自动跳回第一张;同理如果当前显示的图片为第一张时,上一张使它自动跳回最后一张;
7、设置顶部的文字先要获取对应的p标签对象;
8、通过修改p标签里面的文字就可以实现顶部文字的实时变换;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换练习</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            margin: 50px auto;
            padding: 30px;
            background-color: aquamarine;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            /**
             * 点击按钮实现图片的切换
             */

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

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

            //6、创建一个变量保存当前正在显示的图片的索引
            var index = 0;//默认显示的是第一张

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

            //9、设置提示文字
            info.innerHTML = "一共" + imgArr.length + "张图片, 这是第" + (index + 1) + "张";

            //1、给上一张按钮绑定单击事件
            var prev = document.getElementById("prev");
            prev.onclick = function () {

                //7、当索引为第一张时,那么就要将索引设置为最后一张,由于采用的是--index,所以将index设置为5
                if (index == 0) {
                    index = 5;
                }
                index = index - 1;

                //4、切换图片,实质上就是修改img里面的src属性
                img.src = imgArr[index];

                //9、设置提示文字
                info.innerHTML = "一共" + imgArr.length + "张图片, 这是第" + (index + 1) + "张";
            }

            //2、给下一张按钮绑定单击事件
            var next = document.getElementById("next");
            next.onclick = function () {

                //7、当索引为最后一张时,那么就要将索引设置为第一张,由于采用的是++index,所以将index设置为-1
                if (index == 4) {
                    index = -1;
                }

                index = index + 1;
                //4、切换图片,实质上就是修改img里面的src属性
                img.src = imgArr[index];

                //9、设置提示文字
                info.innerHTML = "一共" + imgArr.length + "张图片, 这是第" + (index + 1) + "张";

            }
        }
    </script>
</head>
<body>
<div id=outer align="center">
    <p id=info></p>
    <img src="img/1.jpg" alt="冰棍"/><br/>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
</div>
</body>
</html>

完成后的效果:每次点击下一张或者上一张会实现图片的切换,同时顶部的提示文字也会随之发生改变。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 最简单的js图片切换效果实现代码
  • 用html+css+js实现的一个简单的图片切换特效
  • 纯js实现背景图片切换效果代码
  • 简单的实现点击箭头图片切换的js代码
  • css图片切换效果代码[不用js]
  • 纯js无flash仿搜狐女人频道FLASH图片切换效果代码
  • javascript实现图片切换的幻灯片效果源代码
  • JS实现图片切换效果
  • JavaScript实现图片切换效果
  • js鼠标点击图片切换效果代码分享
张贴在2