创建相同样式的模板简易版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="" alt="没有图 加载中">
<script>
    var  oIMg=document.querySelector("img");
    var json = [

        {
            id: 2,
            src: "//g-search1.alicdn.com/img/bao/uploaded/i4/i3/196993935/O1CN01K51MSW1ewH0FchK2U_!!0-item_pic.jpg_250x250.jpg_.webp",
        },

        {
            id: 3,
            src: "//g-search2.alicdn.com/img/bao/uploaded/i4/i1/196993935/O1CN01lzSWG11ewH0J3vsPY_!!0-item_pic.jpg_250x250.jpg_.webp",
        },
        {
            id: 4,
            src: "//g-search3.alicdn.com/img/bao/uploaded/i4/i1/4162365481/O1CN011qMLIz3bp8dMJMN_!!0-item_pic.jpg_250x250.jpg_.webp"
        },
        {
            id: 1,
            src: "https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/32694090/O1CN011g5GNfUn6D6WS0X_!!0-saturn_solar.jpg_250x250.jpg_.webp",
        }

    ]
//   ?clothid=2

   var  id=location.search.substring(location.search.indexOf("=") + 1,);
    json.forEach(function (item) {
        if(item.id==id){
            oIMg.src=item.src;

        }
    })




</script>

</body>
</html>

第二个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            float: left;
            width: 200px;
            height: 200px;
            background: red;
            list-style: none;
            margin: 10px;
        }
        li img{
            width: 100%;
        }
    </style>
</head>
<body>
<ul>
    <li data-id="1"><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/32694090/O1CN011g5GNfUn6D6WS0X_!!0-saturn_solar.jpg_250x250.jpg_.webp" alt=""></li>
    <li data-id="2"><img src="//g-search1.alicdn.com/img/bao/uploaded/i4/i3/196993935/O1CN01K51MSW1ewH0FchK2U_!!0-item_pic.jpg_250x250.jpg_.webp" alt=""></li>
    <li data-id="3"><img src="//g-search2.alicdn.com/img/bao/uploaded/i4/i1/196993935/O1CN01lzSWG11ewH0J3vsPY_!!0-item_pic.jpg_250x250.jpg_.webp" alt=""></li>
    <li data-id="4"><img src="//g-search3.alicdn.com/img/bao/uploaded/i4/i1/4162365481/O1CN011qMLIz3bp8dMJMN_!!0-item_pic.jpg_250x250.jpg_.webp" alt=""></li>
</ul>
<script>
    var oUl=document.querySelector("ul");
    oUl.addEventListener("click",function (ev) {
        var ev=window.event||ev;
//        console.log(ev);
        var  target=ev.target||ev.srcElement ;
//        console.log(target.parentNode.getAttribute("data-id"));
        window.open("xiangqing.html?clothid="+target.parentNode.getAttribute("data-id"))
//        http://localhost:63342/web5/js14/libiao/xiangqing.html?clothid=1
//        http://localhost:63342/web5/js14/libiao/xiangqing.html?clothid=2
    })



</script>
</body>
</html>

创建相同样式的模板 简易版

猜你喜欢

创建相同样式的模板简易版