jquery实现点击小图实现大图的案例

最新推荐文章于 2022-05-20 18:05:50 发布

weixin_30808693

最新推荐文章于 2022-05-20 18:05:50 发布

阅读量399

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/web001/p/8343867.html

版权

今天的这个例子主要是实现点击小图能显示大图，来直接看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{ margin:0; padding:0;}
    ul,li{list-style: none;}
    a{text-decoration: none;}
    .box{overflow: hidden;width:500px;margin:100px auto;}
    #sPic{overflow: hidden}
    #sPic li{width:100px;float:left;margin:10px;}
    #sPic li img{width:100px;height:auto;}
    #images{width:500px;}
    #des{text-align: center}
</style>
<body>
<div class="box">
    <ul id="sPic">
        <li><a href="javascript:void(0)" title="图片一"><img alt="图片一" src="img/pic1.jpg"/></a></li>
        <li><a href="javascript:void(0)" title="图片二"><img alt="图片二" src="img/pic2.jpg"/></a></li>
        <li><a href="javascript:void(0)" title="图片三"><img alt="图片三" src="img/pic3.jpg"/></a></li>
        <li><a href="javascript:void(0)" title="图片四"><img alt="图片四" src="img/pic4.jpg"/></a></li>
    </ul>
    <img id="images" src="img/pic1.jpg" width="500" alt=""/>
    <div id="des"></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        $("#sPic  a img").click(function(){
            var src=$(this).attr("src");
            $("#images").attr("src",src);

            var title=$(this).attr("alt");
            $("#des").text(title);

        })
    })
</script>

</body>
</html>

效果图如下：

这个例子也只是简单的实现了点击小图呈现大图的效果，还有点击大图收回的效果也就是让其消失等等。希望这些对你有帮助把！

当然也希望有问题直接询问评论！

转载于:https://www.cnblogs.com/web001/p/8343867.html

weixin_30808693

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现点击小图实现大图的案例

今天的这个例子主要是实现点击小图能显示大图，来直接看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> ...
复制链接

扫一扫