Question

我在网络开发方面有点新意，所以我需要专业的帮助。我有幻灯片。我面临的问题是我希望它在幻灯片显示的后退/前进图标上显示下一张或上一张图片的文件名。可能吗？用这些代码。这是我的简报example

HTML：

<div id="container">
        <ul>
            <li><img src=""></li>
            <li><img src=""></li>       
        </ul>
        <span class="button prevButton"></span>
        <span class="button nextButton"></span>
</div>

JS：

$(window).load(function(){
            var pages = $('#container li'), current=0;
            var currentPage,nextPage;

            $('#container .button').click(function(){
                currentPage= pages.eq(current);
                if($(this).hasClass('prevButton'))
                {

                    if (current <= 0)
                        current=pages.length-1;
                    else
                        current=current-1;
                }
                else
                {
                    if (current >= pages.length-1)
                        current=0;
                    else
                        current=current+1;
                }
                nextPage = pages.eq(current);   
                currentPage.hide(); 
                nextPage.show();        
            });
    });

Answer 1

你做错了，你不需要为你拥有的每一张图像创建元素。

同样要获取文件名，请使用以下代码：

 url.substring(url.lastIndexOf('/')+1);

完整代码

<img src="" id="slide">    


$(window).load(function(){
        function getFileName(url) {
            return url.substring(url.lastIndexOf('/')+1);
        }
        var $imgEl = $("#slide");
        var counter = 0;
        var imagesSrcs = [ 'http://www.exmaple.com/example.jpg', 'http://www.exmaple.com/example.jpg', 'http://www.exmaple.com/example.jpg']; 


        $('#container .button').click(function(){
            if($(this).hasClass('prevButton'))
            {

                counter--;
                if (counter < 0)
                    counter = imagesSrcs.length - 1;
            }
            else
            {
                counter++;
                if (counter == imagesSrcs.length)
                     counter = 0;

            }
            $imgEl.attr('src', imagesSrcs[counter]);
            console.log(getFileName(imagesSrcs[Math.min(counter + 1, imagesSrcs.length -1)])); //next image file name  
            console.log(getFileName(imagesSrcs[Math.max(counter - 1, 0)])); //previous image file name      
        });
});

https://jsfiddle.net/u0fcbgga/

Answer 2

谢谢你的代码，它的工作就像一个普通的幻灯片，但我相信我让你感到困惑，抱歉。我真正想要的是我在幻灯片中有这两个后退/前进按钮图标，我喜欢在我们点击后退/前进按钮之前显示下一个/上一个图像名称（这是图标链接http://imgur.com/a/scXNM）结果是一个幻灯片，但它会像这样 Result

p / s：谢谢你的辛勤工作。

在后退/前进按钮上显示下一个/上一个图像的文件名

2 个答案: