html页面中每张照片的下一个上一个锚点

Question

我正在尝试创建一个图库页面，该页面将逐一列出照片。但是我想为每张照片都有一个锚点，当用户单击下一个上一个按钮时，它应该使用ID的值相应地滑动到下一个/上一个照片。有人知道如何在jquery中实现此功能吗？请通过演示以更好地理解；

https://jsfiddle.net/2oqg9rpL/

<div class="photogallery_wrapper_nf">

        <div class="next"><img src="http://ktdev.khaleejtimes.ae/up-chevron.png" /></div>
        <div class="previous"><img src="http://ktdev.khaleejtimes.ae/down-chevron.png" /></div>

        <div class="photogallery_item_nf_heading">

            <h1>Heading # 1 </h1>
            <p>Published on November 17, 2019 at 07.50 am</p>
        </div>

        <div class="photogallery_item_nf" id="slide1">
            <div class="photogallery_item_nf_img">
                <img src="https://picsum.photos/1200/800/?random" />

            </div>

            <div class="photogallery_item_nf_caption">

                <h3>Caption goes here Caption goes hereCaption goes here</h3>
                <h6>Photo by ddvdvd </h6>

            </div>

        </div>


        <div class="photogallery_item_nf" id="slide2">
            <div class="photogallery_item_nf_img">
                <img src="https://picsum.photos/1200/800/?random" />

            </div>

            <div class="photogallery_item_nf_caption">

        <h3>Caption goes here Caption goes hereCaption goes here</h3>
                <h6>Photo by ddvdvd </h6>

            </div>

        </div>



        <div class="photogallery_item_nf" id="slide3">
            <div class="photogallery_item_nf_img">
                <img src="https://picsum.photos/1200/800/?random" />

            </div>

            <div class="photogallery_item_nf_caption">

        <h3>Caption goes here Caption goes hereCaption goes here</h3>
                <h6>Photo by ddvdvd </h6>

            </div>

        </div>

                <div class="photogallery_item_nf" id="slide4">
            <div class="photogallery_item_nf_img">
                <img src="https://picsum.photos/1200/800/?random" />

            </div>

            <div class="photogallery_item_nf_caption">
        <h3>Caption goes here Caption goes hereCaption goes here</h3>
                <h6>Photo by ddvdvd </h6>

            </div>

        </div>

    </div>








.photogallery_wrapper_nf {
        width: 100%;
        float: left;
        position: relative;
        clear: both;
    }

    .next {
        position: fixed;
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
        z-index: 999 !important;
    }
    .previous {
        position: fixed;
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 75px;
        z-index: 999 !important;
    }

    .next img {
        width: 40px !important;
        height: 40px  !important;
    }
    .previous img {
        width: 40px !important;
        height: 40px  !important;
    }

    .photogallery_item_nf {
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 20px;
    }
    .photogallery_item_nf_heading {
        width: 100%;
        clear: both;
        margin: 15px 0px;
    }
    .photogallery_item_nf_heading h1 {
        color: #000 !important;
        font-family: 'Roboto Condensed', sans-serif;
        font-weight: bold;
        font-size: 35px;
        line-height: 40px;
        font-weight: bold;
        padding-left: 10px;
    }
    .photogallery_item_nf_heading p {
        margin-top: 8px;
        color: #767676 !important;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 15px;
        font-weight: normal;
        padding-left: 10px;
    }

    .photogallery_item_nf_img {
        width: 100%;
        float: left;
        position: relative;
    }
    .photogallery_item_nf_img img {
        width: 100%;
    }
    .photogallery_item_nf_caption {
        width: 100%;
        float: left;
        position: relative;
        padding: 12px 0;  
    }


    .photogallery_item_nf_caption h3 {
        color: #000 !important;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 18px;
        line-height: 26px;
        font-weight: bold;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    .photogallery_item_nf_caption h6 {
        color: #767676 !important;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 15px;
        font-weight: normal;
        padding-left: 10px;
    }

</style>

Answer 1

我更喜欢使用js而不是jquery。建立图书馆是为了青睐开发人员。因此，如果您没有任何技术限制，请使用它。尝试glide js。

Glide.js是一种无依赖项的JavaScript ES6滑块和轮播。它的轻巧，灵活和快速。设计用于滑动。不少于，不多。

同样，您可以选择该库。这只是一个建议

响应速度更快。这将帮助您解决问题。