重回js—切换图片

最新推荐文章于 2024-03-27 16:24:48 发布

M_SIDAER

最新推荐文章于 2024-03-27 16:24:48 发布

阅读量335

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/M_SIDAER/article/details/53511342

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、点击切换按钮切换图片
设置一个开关变量onoff,点击按钮一次改变onoff的值
img.src=”图片路径”;可以显示一张图片

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <img src="img/1.png" id="img1" width="400" height="500">
    <input type="button" value="切换" id="btn">
    <script>
        var oImg=document.getElementById("img1");
        var oBtn=document.getElementById("btn");
        var onOff=1;
        oBtn.onclick=function(){
            if(onOff==1){
                oImg.src="img/1.png";
                onOff=2;
            }
            else if(onOff==2){
                oImg.src="img/2.png";
                onOff=3;
            }
            else if(onOff==3){
                oImg.src="img/3.png";
                onOff=4;
            }
            else{
                oImg.src="img/4.png";
                onOff="1";
            }
        }
    </script>
</body>
</html>

2、切换图片（四张图片四个按钮）

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        .nav{position:absolute;width:400px;height:500px;top:50%;left:50%;margin-left:-200px;margin-top:-250px;}
        #div1{margin-top:30px;margin-left:120px;}
    </style>
</head>
<body>
    <div class="nav">
        <img src="img/1.png" id="img1" width="400" height="500">
        <div id="div1">
            <input type="button" value="1" id="btn1">
            <input type="button" value="2" id="btn2">
            <input type="button" value="3" id="btn3">
            <input type="button" value="4" id="btn4">
        </div>
    </div>
    <script>
        var oImg=document.getElementById("img1");
        var oDiv=document.getElementById("div1");
        var aBtn=oDiv.getElementsByTagName("input");
        var pic_src=["img/1.png","img/2.png","img/3.png","img/4.png"];
        for(var i=0;i<aBtn.length;i++){
            aBtn[i].index=i;
            aBtn[i].onclick=function(){
                var n=this.index;
                oImg.src=pic_src[n];
            }
        }
    </script>
</body>

3、图片切换（两个按钮：上一张和下一张）
ps: 1、当事件前是单个变量时，不要用for循环，而是通过变量的变换动态改变for循环用于事件前是一个数组（或类数组），要取出数组中的某个单独的元素时。
2、符号切记加”
如本题的‘/ ’而不是直接/

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    #p1,#p2{background-color:#ccc; line-height:30px; font-size:20px; color:#fff; margin:0; width:100%; text-align:center; opacity:0.6;}
    .box{position:relative; width:400px;margin:0 auto;}
    #p1{position:absolute; top:0; left:0;}
    #p2{position:absolute; bottom:0; left:0;}
    .div1{position:absolute; bottom:80px; left:600px;}
</style>
</head>
<body>
    <div class="div1">
        <input type="button" value="上一张"    id="btn1">
        <input type="button" value="下一张" id="btn2">
    </div>
    <div class="box">
        <img src="img/1.png" id="img1" width="400" height="500">
        <p id="p1"></p>
        <p id="p2"></p>
    </div>
    <script>
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oImg=document.getElementById("img1");
        var oP1=document.getElementById("p1");
        var oP2=document.getElementById("p2");
        var arr_pic=["img/1.png","img/2.png","img/3.png","img/4.png"];
        var arr_p2= ['老鹰','魔女','精灵','钢铁侠'];
        var i=0;
        oP1.innerHTML=(i+1)+'/'+arr_pic.length;
        oP2.innerHTML=arr_p2[i];
        oBtn2.onclick=function(){
            if(i<arr_pic.length-1){
                oImg.src=arr_pic[++i];
                oP1.innerHTML=(i+1)+'/'+arr_pic.length;
                oP2.innerHTML=arr_p2[i];
            }
            else{
                i=0;
                oImg.src=arr_pic[i];
            }   
        }
        oBtn1.onclick=function(){
            if(i>0){
                oImg.src=arr_pic[--i];
                oP1.innerHTML=(i+1)+'/'+arr_pic.length;
                oP2.innerHTML=arr_p2[i];
            }
            else{
                i=arr_pic.length-1;
                oImg.src=arr_pic[i];
            }   
        }       

    </script>
</body>

M_SIDAER

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
重回js—切换图片

一、点击切换按钮切换图片设置一个开关变量onoff,点击按钮一次改变onoff的值 img.src=”图片路径”;可以显示一张图片<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns
复制链接

扫一扫