JS案例之图片切换、显示隐藏盒子、相册轮播

1.图片切换

< a href="#" style=“margin: 10px;display: block” “fn()”>切换
< img src=“jd1.jpg” width=“400” alt="" id=“image”>

var a=document.getElementsByTagName("a")[0];
var img=document.getElementById("image");
function fn() {
    img.src="jd2.jpg";
    return false;
}

2.显示隐藏盒子

<meta charset="UTF-8">
<title>Title</title>
<style>
    button{
        margin: 10px;
    }
    div{
        width:200px;
        height:200px;
        background-color: pink;
    }
    .show{
        display: block;
    }
    .hide{
        display: none;
    }
</style>

< button id=“btn” “fn1()”>隐藏
< div >冰冻三尺非一日之寒

//点击button按钮隐藏盒子，改变文字，再点击显示盒子文字
var btn=document.getElementById("btn");
var div=document.getElementsByTagName("div")[0];
    function  fn1() {
        if(btn.innerHTML==="隐藏")
        {
            div.className="hide";
            btn.innerHTML="显示";
        }
       else{
            div.className="show";
            btn.innerHTML="隐藏";
        }
    }

3.相册轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    ul li{
        display: inline-block;
        list-style: none;
    }
</style>
<body>
<h2>画廊</h2>
<ul id="imuil">
    <li>
       <a href="jd1.jpg" title="A">
           <img src="jd1.jpg" width="100" alt="1">
       </a>
    </li>
    <li>
        <a href="jd2.jpg" title="B">
            <img src="jd2.jpg" width="100" alt="2">
        </a>
    </li>
    <li>
        <a href="2.jpg" title="C">
            <img src="2.jpg" width="100" alt="3">
        </a>
    </li>
    <li>
        <a href="4.jpg" title="D">
            <img src="4.jpg" width="100" alt="4">
        </a>
    </li>
</ul>
<div style="clear: both;"></div>
<img id="image" src="jd1.jpg" width="450px">
<p id="des">选择一个图片</p>
<script>
    var ul=document.getElementById("imuil");
    var aArr=ul.getElementsByTagName("a");
    var img=document.getElementById("image");
    var des=document.getElementById("des");
    for(var i=0;i<aArr.length;i++){
        aArr[i].function () {
            //this指的是函数的调用者，和i无关系
            img.src=this.href;
            des.innerHTML=this.title;
            return false;
        }
    }
</script>
</body>
</html>

JS案例之图片切换、显示隐藏盒子、相册轮播

1.图片切换

2.显示隐藏盒子

3.相册轮播

猜你喜欢