W
e
l
c
o
m
e
: )

15行代码模仿淘宝商品显示

效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #header{
            height: 500px;
            width: 360px;
            border: solid 0.5px #233;
            margin-left: 200px;
        }
        #tab1{
            margin: auto;
            margin-top: 10px;  
        } 
    </style>
    <script src="js.js"></script>
</head>
<body>
    <div id="header">
        <table width="270px" height="360px" id="tab1">
            <tr height="300px">
                <td colspan="5">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/201512228/O1CN01MqcxHQ1SKT1hKrRLB_!!201512228.png_400x400.jpg" id="bigimg" alt="">
                </td>
            </tr>
            <tr height="60px">
             <td><img src="https://img.alicdn.com/bao/uploaded/i1/201512228/O1CN01MqcxHQ1SKT1hKrRLB_!!201512228.png_50x50.jpg_.webp" alt="" onmouseover="openimg(this,1)" onmouseout="outimg(this)"></td>
             <td><img src="https://img.alicdn.com/imgextra/i1/201512228/O1CN01uSrDZJ1SKT1gn6vAG_!!201512228.png_50x50.jpg_.webp" alt="" onmouseover="openimg(this,2)" onmouseout="outimg(this)" ></td>
             <td><img src="https://img.alicdn.com/imgextra/i4/201512228/O1CN01PtlXaY1SKT1hFVnHW_!!201512228.png_50x50.jpg_.webp" alt="" onmouseover="openimg(this,3)" onmouseout="outimg(this)"></td>
             <td><img src="https://img.alicdn.com/imgextra/i4/201512228/O1CN01Pi1MOC1SKT1kN7Yt2_!!201512228.jpg_50x50.jpg_.webp" alt=""  onmouseover="openimg(this,4)" onmouseout="outimg(this)"></td>
             <td><img src="https://img.alicdn.com/imgextra/i2/201512228/O1CN01XmcAVi1SKT2ApZSSK_!!201512228.jpg_50x50.jpg_.webp" alt=""  onmouseover="openimg(this,5)" onmouseout="outimg(this)"></td>
            </tr>
        </table>
    </div>
</body>
</html>

function openimg(img,id){
    //
    img.style.border="solid 2px red";
    var big=document.getElementById("bigimg");
    var ar=["https://img.alicdn.com/bao/uploaded/i1/201512228/O1CN01MqcxHQ1SKT1hKrRLB_!!201512228.png_400x400.jpg",
        "https://img.alicdn.com/imgextra/i1/201512228/O1CN01uSrDZJ1SKT1gn6vAG_!!201512228.png_400x400.jpg",
        "https://img.alicdn.com/imgextra/i4/201512228/O1CN01PtlXaY1SKT1hFVnHW_!!201512228.png_400x400.jpg",
        "https://img.alicdn.com/imgextra/i4/201512228/O1CN01Pi1MOC1SKT1kN7Yt2_!!201512228.jpg_400x400.jpg",
        "https://img.alicdn.com/imgextra/i2/201512228/O1CN01XmcAVi1SKT2ApZSSK_!!201512228.jpg_400x400.jpg"]
        big.src=ar[id-1]
    }
function outimg(img){
    img.style.border=""
}
posted @ 2020-05-11 18:54  rmxob  阅读(347)  评论(0)    收藏  举报