时间戳

首页 > 解决方案 > 具有一些功能的响应式 jQuery 照片库

javascript - 具有一些功能的响应式 jQuery 照片库

问题描述

我需要你的帮助来创建 jquery 照片库。我需要使这个页面响应。我需要添加下一个和上一个按钮。我还需要添加停止和恢复按钮。但最重要的是，我需要让它响应。感谢您的任何反馈。

非常感谢。

到目前为止，我的代码如下。

$(".thumb").click(function () {
    $("#large img").attr("src", $(this).children("img").attr("src"));
    $(".active").removeClass("active");
    $(this).addClass("active");
});

setInterval(function () {
    var $dalsi = $(".active").next();
    if($dalsi.length == 1) {
        $dalsi.click();
    }
    else {
        $("#thumbnails .thumb:first-child").click();
    }
}, 1000);
main {
    max-width: 1024px;
    margin: 0 auto;
}
#large {
    width: 100%;
    height: 400px;
    overflow: hidden;
}
#thumbnails {
    width: 100%;
}
#large img {
    height: 100%;
    display: block;
    margin: 0 auto;
}
.thumb {
    height: 200px;
    width: 24%;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
}

.thumb img {
    height: 100%;
    width: auto;
    margin: 0 auto;
}
.thumb.active {
    border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <div id="large">
            <img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
        </div>
        <div id="thumbnails">
            <div class="thumb active">
                <img src="http://w03000.mycloudware.net/wp-content/uploads/2014/08/Brambora.jpg">
            </div>
            <div class="thumb">
                <img src="http://wiki.rvp.cz/@api/deki/files/12941/=brambora_hliza.jpg">
            </div>
            <div class="thumb">
                <img src="http://instory.cz/content/images/59/9d/599d2fbda3daf-985.jpg">
            </div>
            <div class="thumb">
                <img src="http://www.bonella.cz/public/userfiles/obrazky-clanky/hubnuti/diety/brambora.jpg">
            </div>
        </div>
    </main>
    <script src="jquery-3.3.1.js"></script>
    <script src="script.js"></script>
</body>
</html>

感谢帮助。

标签： javascriptjqueryhtmlcss

解决方案

推荐阅读