我如何添加导航箭头上的“JQuery照片滑块与半透明标题”

How can I add navigation arrows on the “JQuery Photo Slider with Semi Transparent Caption”?

本文关键字：照片 JQuery 标题 半透明 何添加 添加 导航      更新时间：2023-09-26

我正在使用来自queness.com (http://www.queness.com/resources/html/slideshow/jquery-slideshow.html)的"JQuery照片滑块与半透明标题"，我喜欢它。

唯一缺少的是导航按钮。我已经修改了原来的HTML并添加了导航按钮，但不知道如何实例化/调用导航:

 <div style="opacity: 1; visibility: visible; width: 550px; height: 350px;">

<div id="slider-container">
    <ul class="slideshow">
        @foreach ($images as $image)

            <li class="show"><a href="/link/{{ $image->id }}" target="_blank"><img src="{{ $image->image_src }}" width="550" height="350" title="Title" alt="Desc"/></a></li>
         @endforeach

    </ul>

</div>


<div id="navigation">
                        <img style="opacity: 0;" id="prev" class="prev-button" src="prev.png" alt="Previous">
            <img style="opacity: 0;" id="next" class="next-button" src="next.png" alt="Next">
                                    <img style="opacity: 0; margin-left: -17px; display: none;" id="play" class="play-button" src="play.png" alt="Play">
            <img style="opacity: 0; margin-left: -17px; display: none;" id="pause" class="pause-button" src="pause.png" alt="Pause">
</div>

</div>

理想情况下，我需要导航显示在悬停，就像在这个页面:http://airmaster.co.ke/

那么，您需要做的是为导航按钮设置几个单击处理程序。我不确定你是否也想从例子中实现播放/暂停按钮功能，因为它没有在你的问题中提到。

因此，首先，由于您的下一个和上一个导航按钮实际上是图像，并且您已经为它们提供了id，因此我们可以使用jQuery设置点击处理程序，如下所示: 
$('#prev').click(function(){
    // Handle click here
})
$('#next').click(function(){
    // Handle click here
})

现在已经设置了单击处理程序，我们需要实现实际的导航。根据这个链接(http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption)，导航实现如下:

//if no li has the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('ul.slideshow li:first'));
$('#prev').click(function(){
     //Get previous image, if it reached the beginning of the slideshow, rotate it back to the last image
    var prev = (current.prev().length) ? current.prev() : $('ul.slideshow li:last');
    //Set the fade in effect for the next image, show class has higher z-index
    prev.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);
    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
        .removeClass('show');
});
$('#next').click(function(){
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = (current.next().length) ? current.next() : $('ul.slideshow li:first');
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);
    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
        .removeClass('show');
});

同样，你应该从这个列表项中删除类"show":

<li class="show"><a href="/link/{{ $image->id }}" target="_blank"><img src="{{ $image->image_src }}" width="550" height="350" title="Title" alt="Desc"/></a></li>

所以应该是:

<li><a href="/link/{{ $image->id }}" target="_blank"><img src="{{ $image->image_src }}" width="550" height="350" title="Title" alt="Desc"/></a></li>

因为这个循环实际上给了每个li一个show类，这会破坏你的代码。

从理论上讲，

应该可以使代码正常工作。但是，由于您没有提供足够的代码或JSFiddle，我无法为您制作一个工作示例。

参考下面的链接(上面提到的)，以了解更多关于如何在代码中实现附带内容的信息:

http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

编辑

我还忘了添加如何在悬停时显示导航按钮。这是你应该添加的内容:

$('#navigation').hover(function(){
    // Code for when mouse enters
    // Animate opacity to 1 (fully visible) in 200 ms
    $('#next').animate({opacity: 1.0}, 200);
    $('#prev').animate({opacity: 1.0}, 200)
},function(){
    // Code for when mouse leaves
    // Animate opacity to 0 (invisible) in 200 ms
    $('#next').animate({opacity: 0.0}, 200);
    $('#prev').animate({opacity: 0.0}, 200)
});

我从来没有使用过这个滑块，我也不太了解JQuery，但我确实想尝试帮助。你考虑过滑滑吗?它非常简单，只有1页(不多不少)的教程，而且效果很好。你可以在这里找到:http://kenwheeler.github.io/slick/。它做你需要的，而且是免费的。如果您想保持当前的滑块，恐怕我帮不了您。好运！

相关文章：