jQuery 参考指南

作者：System 时间：2024年08月15日分类：所有,jquery 字数：1080

在这个例子中，我们将使用jQuery来创建一个简单的图片库。这个图片库将会有一个可以切换显示不同图片的按钮列表，以及一个显示当前图片的主要区域。

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="gallery">
    <div class="button-panel">
        <button class="button" data-image="image1.jpg">图片1</button>
        <button class="button" data-image="image2.jpg">图片2</button>
        <button class="button" data-image="image3.jpg">图片3</button>
    </div>
    <div class="main-image">
        <img src="placeholder.jpg" alt="Gallery Image" id="main-img">
    </div>
</div>
 
<script src="script.js"></script>
</body>
</html>

JavaScript部分 (script.js):




$(document).ready(function() {
    $('.button').click(function() {
        var imgSrc = $(this).data('image');
        $('#main-img').attr('src', imgSrc);
    });
});

这段代码首先在文档加载完毕时设置事件处理器。当任何具有button类的元素被点击时，它会读取该元素的data-image属性，并将其值设置为#main-img图片的src属性。这样，当用户点击不同的按钮时，主显示区域的图片就会切换。

jQuery 参考指南

评论已关闭

推荐阅读