itanℒ 2019-08-02 14:14 采纳率: 64.1%
浏览 3516
已采纳

点击小图 显示大图.........

图片说明

点击哪个小图就显示对应的大图，可以切换.

要做数据渲染，请大佬给个代码.......

  • 写回答

2条回答 默认 最新

  • 一只成序源 2019-08-02 15:49
    关注
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #imgList img{
                width: 50px;
                height: 50px;
            }
            #bigImgBox{
                border: 1px solid black;
                display: none;
                width: 200px;
            }
            #imgShow{
                width: 200px;
                height: 200px;
            }
            .span{
                height: 20px;
                float: right;
                cursor: pointer;
            }
        </style>
    </head>
    <script type="text/javascript" src="jquery-1.11.0.js" ></script>
    <body>
        <div id="imgList">
            <img id="img1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564742106468&di=67e220989e9b6fcac40ec527546897f8&imgtype=0&src=http%3A%2F%2Fp8.qhimg.com%2Ft019d1ab5fe093e11a1.jpg%3Fsize%3D640x640" onclick="imgClick(this)" />
            <img id="img2" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565336705&di=6a01512a47139e234a41d7da60f8922a&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201706%2F22%2F99ebdd0748.jpg" onclick="imgClick(this)"/>
            <img id="img3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1564742206868&di=bc76c7cd6c194e119554dc16eb282a6b&imgtype=0&src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201707%2F10%2Fd648fbcd42.jpg" onclick="imgClick(this)"/>
        </div>

        <div id="bigImgBox">
            <div class="span"><span>X</span></div>
            <img id="imgShow" src="" />
        </div>
    </body>
    <script>
        function imgClick(img){
            $("#imgShow").attr("src",img.src);
            $("#bigImgBox").css("display","block");
        }
        $(".span").on("click",function(){
            $("#bigImgBox").css("display","none");
        })
    </script>
</html>

    jQuery替换下路劲，图片，都是百度的，可以直接看
    是这效果不，老哥，还记得我我不

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！