jQuery实用案例之电子相册(类似购物商城中商品图片切换展示)

小龙爷ღ

于 2019-08-29 19:55:55 发布

阅读量806

点赞数 1

分类专栏： JQuery 文章标签：电子相册 jquery实现相册展示 jquery实现电子商城商品详情页图片展示

本文链接：https://blog.csdn.net/qq_45086879/article/details/100145351

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果展示：点击上方的小图预览，下面展示出大图

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子相册</title>
    <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }

        h1 {
            color: #333;
            background-color: transparent;
        }

        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }

        ul {
            padding: 0;
        }

        li {
            float: left;
            padding: 1em;
            list-style: none;
        }

        #imagegallery {

            list-style: none;
        }

        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }
    </style>
</head>
<body>
<h2>
    美女画廊
</h2>

<ul id="imagegallery">
    <li><a href="images/1.jpg" title="美女A">
        <img src="images/1-small.jpg" width="100" alt="美女1"/>
    </a></li>
    <li><a href="images/2.jpg" title="美女B">
        <img src="images/2-small.jpg" width="100" alt="美女2"/>
    </a></li>
    <li><a href="images/3.jpg" title="美女C">
        <img src="images/3-small.jpg" width="100" alt="美女3"/>
    </a></li>
    <li><a href="images/4.jpg" title="美女D">
        <img src="images/4-small.jpg" width="100" alt="美女4"/>
    </a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px"/>
<p id="des">选择一个图片</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        //1.需求
        //给小图片a标签设置一个单击事件.
        //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
        //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.

        $('#imagegallery>li>a').click(function () {
            //获取当前点击的a标签的href属性的值和title属性的值。
            var srcValue = $(this).attr('href');
            console.log(srcValue);
            var contentValue = $(this).attr('title');
            //给img标签的src属性赋值，以及给p标签的内容赋值。
            $('#image').attr('src', srcValue);
            $('#des').text(contentValue);
            //阻止a标签的跳转
            return false;
        });
    })
</script>
</body>
</html>

小龙爷ღ

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery实用案例之电子相册(类似购物商城中商品图片切换展示)

效果展示：点击上方的小图预览，下面展示出大图案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>电子相册</title> <style type="text/css"> ...
复制链接

扫一扫