Question

我正在尝试创建一个图库页面，该页面将逐一列出照片。但是我想为每张照片设置一个锚点，当用户单击下一个上一个按钮时，它应该使用ID的值相应地滑动到下一个/上一个照片。

如何在jquery中实现此功能？

<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

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

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

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

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

Answer 2

检查此滑块

$(function() {
    $('#checkbox').change(function () {
        setInterval(function () {
            moveRight();
        }, 3000);
    });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({
        width: slideWidth,
        height: slideHeight
    });

    $('#slider ul').css({
        width: sliderUlWidth,
        marginLeft: -slideWidth
    });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: +slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: -slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });
});

 html {
    border-top: 5px solid #fff;
    background: #58DDAF;
    color: #2a2a2a;
}
html, body {
    margin: 0;
    padding: 0;
    font-family:'Open Sans';
}
h1 {
    color: #fff;
    text-align: center;
    font-weight: 300;
}
#slider {
    position: relative;
    overflow: hidden;
    margin: 20px auto 0 auto;
    border-radius: 4px;
}
#slider ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 200px;
    list-style: none;
}
#slider ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 300px;
    background: #ccc;
    text-align: center;
    line-height: 300px;
}
a.control_prev, a.control_next {
    position: absolute;
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    width: auto;
    height: auto;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}
a.control_prev {
    border-radius: 0 2px 2px 0;
}
a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;
}
.slider_option {
    position: relative;
    margin: 10px auto;
    width: 160px;
    font-size: 18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1>Incredibly Basic Slider</h1>

<div id="slider">
    <a href="#" class="control_next">&gt;</a>
    <a href="#" class="control_prev">&lt;</a>
    <ul>
        <li><img src="https://picsum.photos/1200/800/?random" /></li>
        <li>	<img src="https://picsum.photos/1200/800/?random" /></li>
        <li>	<img src="https://picsum.photos/1200/800/?random" /></li>
        <li>	<img src="https://picsum.photos/1200/800/?random" /></li>
    </ul>
</div>
<div class="slider_option">
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">Autoplay Slider</label>
</div>

Answer 3

这可能对您有帮助

(()=>currentSlide=1)()
document.getElementsByClassName("next")[0].onclick=function(){
    currentSlide=currentSlide<4?currentSlide+1:currentSlide;
  alert(currentSlide)
  document.getElementById("slide"+currentSlide).scrollIntoView();
}
document.getElementsByClassName("previous")[0].onclick=function(){
alert(currentSlide)
    currentSlide=currentSlide>1?currentSlide-1:currentSlide;
  document.getElementById("slide"+currentSlide).scrollIntoView();
}

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

3 个答案: