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>

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

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

赞 (0)

相关推荐

  • css图片切换效果代码[不用js]

    css图片切换效果代码[不用js]

    纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • JavaScript实现图片切换效果

    JavaScript实现图片切换效果

    本文实例为大家分享了JavaScript实现图片切换效果,自定义属性的应用  供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换实例</title> <style> body{ background-color: #A9A9A9; margin:0px; } ul{ padding: 0; margi

  • JS实现图片切换效果

    JS实现图片切换效果

    本文实例为大家分享了JS实现图片切换效果的具体代码,供大家参考,具体内容如下 <body> <button id="btn1">ON</button> <button id="btn2">OFF</button><br> <img src="images/0.jpg" alt="" id="pic"> <script

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

  • javascript实现图片切换的幻灯片效果源代码

    网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享 废话少说,看代码 复制代码 代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div

  • 简单的实现点击箭头图片切换的js代码

    简单的实现点击箭头图片切换的js代码

    步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

  • js鼠标点击图片切换效果代码分享

    js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

  • 纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    纯js无flash仿搜狐女人频道FLASH图片切换效果代码

    前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: [加载图片慢点请等会] www.jb51.net 我们 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relativ

随机推荐