Question

我是一个初学者并且为此疯狂，所以我希望有人可以提供帮助，或者至少告诉我，我正在咆哮错误的树！

我正在尝试使用JavaScript（或jQuery;任何真正有用的东西！）来实现照片库的下一个和上一个按钮。我接近它的方法是尝试将图像放入有序列表中，然后从列表中的下一个项目中提取src数据，但它不起作用。

html是沿着这些方向的东西（块div有助于在模态窗口打开之前定位图像，并且它们中也有字幕，因此它不仅仅是一个项目，很容易＆＃39;列表）。

<div class="content">
    <ol>
         <li>
              <div class="block">
                  <img src="Images/image1.jpg">
              </div>
         </li>

         <li>
              <div class="block">
                   <img src="Images/image2.jpg">
              </div>
         </li>
   </ol>  
</div>

所以基本上，模态将显示第一个图像（image1），我试图让下一个按钮找到下一个列表项，取其img src（即image2.jpg）并替换当前的一个它。

这实际上可行吗？下面的代码是我一直在努力的逻辑，但遗憾的是我遗漏了几个关键部分！

var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;

var next = document.getElementsByClassName("next")[0];

for (i = 0; i < images.length; i++) {
    images[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
       /*and this is where it all falls down!*/
        var indexNo = $(this).index();
        var nextIndex = indexNo +1;
        var nextItem = select the list item with the nextIndex;
    }

    next.onclick = function (){
        newSrc = nextItem.getElementsByTagName('src');
        modalImg.src = newSrc;
    }
}

然后我也会为前一个按钮实现此反转。

正如我所说，我只是一个初学者，所以如果我想尝试在阿塔卡马下雨，请告诉我！感谢您的阅读，我期待着任何人的投入：）

Answer 1

试试这个：稍微修改一下你的标记：

var imageCarousel = {
    totalImages: false,
    currentIndex: false,

    init: function() {
        this.totalImages = this.getTotalImages();

        if (this.totalImages) {
            $('.image-wrapper img[data-image-index]').click(function(e){
                e.preventDefault();

                imageCarousel.currentIndex = $(this).data('imageIndex');

                // Show the image here...
            });

            $('.prev-btn, .next-btn').click(function(e){
                e.preventDefault();

                var newIndex = $(this).is('.prev-btn') ? imageCarousel.currentIndex - 1 : imageCarousel.currentIndex + 1,
                    newImageToShow;

                if (newIndex > imageCarousel.totalImages) {
                    newIndex = 1;
                } else if (newIndex == 0) {
                    newIndex = imageCarousel.totalImages;
                }

                newImageToShow = $('.image-wrapper img[data-image-index='+newIndex+']');

                if (newImageToShow.length) {
                    newImageToShow.trigger('click');
                }
            });
        }
    },

    getTotalImages: function() {
        return $('.image-wrapper').length;
    }
}

然后你可以这样做：

$(function(){
    imageCarousel.init();
});

然后打电话给剧本：

{{1}}

Answer 2

我还没有测试过。请尝试检查以下代码是否有效。

var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;

var next = document.getElementsByClassName("next")[0];

for (i = 0; i < images.length; i++) {
    images[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        /*and this is where it all falls down!*/
        //var indexNo = $(this).index();
        var indexNo = i;
        var nextIndex = indexNo +1;
        var nextItem = document.getElementsByTagName('img')[nextIndex];
    }

    next.onclick = function (){
        newSrc = nextItem.getElementsByTagName.src;
        modalImg.src = newSrc;
    }
}

如果您只是尝试使用JavaScript，那么可以。但是，如果你真的想在这里建立一些东西，那么我建议你不要尝试提取源代码并替换它们来制作一个库。尝试将所有图像/元素一次性添加到模态中。然后单击转换/使用CSS3从右到左或从左到右翻译它们。这样你就可以得到一个漂亮而快速的滑块。要实现这一点，您需要了解比JavaScript / jQuery更多的CSS。

更多图书馆cycle2可满足您与滑块相关的所有需求。使用它可以提高速度并获得跨浏览器支持。

从下一个列表项中选择img src以获取下一个按钮

2 个答案: