zoukankan      html  css  js  c++  java
  • 下面5个小图,上面一个大图,点击小图,切换大图

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #box{
    300px;
    border: 1px solid #ccc;
    text-align: center;
    margin: 100px auto;
    }
    #fj{
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    #des{
    padding: 10px;
    color: red;
    }
    #big-img{
    padding-bottom: 10px;
    }

    </style>
    </head>
    <body>
    <div id="box">
    <p id="des">蒲公英</p>
    <img id="big-img" src="1.jpg" alt="" width="300px">
    <ul id="fj">
    <li>
    <a href="1.jpg" title="蒲公英">
    <img src="1.jpg" width="50px" alt="蒲公英">
    </a>
    </li>
    <li>
    <a href="2.jpg" title="花朵">
    <img src="3.jpg" width="50px" alt="花朵">
    </a>
    </li>
    <li>
    <a href="3.jpg" title="树木">
    <img src="2.jpg" width="50px" alt="树木">
    </a>
    </li>
    <li>
    <a href="4.jpg" title="动物">
    <img src="4.jpg" width="50px" alt="动物">
    </a>
    </li>
    <li>
    <a href="5.jpg" title="大熊">
    <img src="5.jpg" width="50px" alt="大熊">
    </a>
    </li>
    </ul>
    </div>
    <script>
    window.onload=function(){
    var des=document.getElementById('des');
    var img=document.getElementById('big-img');
    var ul=document.getElementById('fj');
    var a=ul.getElementsByTagName('a');
    for(var i=0;i<a.length;i++){
    a[i].onclick=function(){
    console.log(this);
    des.innerText=this.title;
    img.src=this.href;
    return false;
    }
    }

    }
    </script>
    </body>
    </html>
  • 相关阅读:
    VSFTP配置参数详解
    C语言---函数
    ios 学习计划
    读书笔记---金融学一<新国富论>
    读书笔记---人生规划一<斯坦福最受欢迎的人生规划课、像卡耐基一样经营人生、九型人格>
    网络基础
    swift中构造方法和Kvc
    swift中的懒加载
    private的用法
    extension
  • 原文地址:https://www.cnblogs.com/yuanyuan-1994/p/9015358.html
Copyright © 2011-2022 走看看