完整的背景图片幻灯片jquery，想让幻灯片的最后一张图片可以点击

Full background image slideshow jquery, want to make the last image of the slideshow clickable

本文关键字：幻灯片 一张 jquery 背景图片 最后      更新时间：2023-12-26

这可能是一个新手问题，如果答案显而易见，请原谅我。我做了一个搜索以避免再次询问，但我想要的是非常具体的，我想知道是否有可能实现。

我有一个使用以下jquery代码的背景图像幻灯片。我用图像的顺序做了一个演示。最后一张图片，我希望它可以点击。但只有最后一张照片。

关于一个想法，请查看我到目前为止做了什么：http://www.gulfandlevant.co.uk/taki/index09.html

我正在使用以下插件：BGSLIDER-INIT.JS

/*global $:false */
/*global window: false */
(function(){
  "use strict";

$(function ($) {
//BG SLIDESHOW WITH ZOOM EFFECT
$.mbBgndGallery.buildGallery({
            containment:"body",
            timer:1300,
            effTimer:1300,
            controls:false, //updated in v1.1
            grayScale:false,
            shuffle:false,
            preserveWidth:false,
            preserveTop: true,
            effect:"fade",
//effect:{enter:{transform:"scale("+(1+ Math.random()*2)+")",opacity:0},exit:{transform:"scale("+(Math.random()*2)+")",opacity:0}},
            // If your server allow directory listing you can use:
            // (however this doesn't work locally on your computer)
            //folderPath:"testImage/",
            // else:
             images:[
             "images/bg/01.jpg",
             "images/bg/02.jpg",
            "images/bg/03.jpg",
            "images/bg/04.jpg",
            "images/bg/05.jpg",
            "images/bg/06.jpg",


             ],
            onStart:function(){},
            onPause:function(){},
            onPlay:function(opt){},
            onChange:function(opt,idx){},
            onNext:function(opt){},
            onPrev:function(opt){}
        });

});
// $(function ($)  : ends
})();
//  JSHint wrapper $(function ($)  : ends

最后一张图片，图片06我希望它是可点击的，我需要在代码中添加什么才能达到这种效果。我想把它链接到我页面上的一个部分，并添加一个滚动类。

看起来幻灯片是用div class"mbBgndGallery"设置背景的。幻灯片对我来说不太正常，但我认为这个插件只是取代了img src。所以，在对插件一无所知的情况下，我想你知道哪张图片是幻灯片中的最后一张图片。在这种情况下，它看起来像"images/bg/06.jpg"是最后一张图像。所以我会写这样的东西。

 if($('.mbBgndGallery img').attr('src') === 'images/bg/06.jpg') {
     $('.mbBgndGallery').on('click', function() {
         window.location = "someURL.com";
     });
 }

当然，只有在加载页面时才会出现if语句。这段代码应该直接添加到插件中，但是如果你不知道如何做到这一点，我建议设置一个间隔，每次更改图像时都会进行检查。看起来你好像每1300毫秒就要更改一次图像。所以设置一个相同时间的间隔。带有轻微偏移。

 var i = setInterval(function() {
    if($('.mbBgndGallery img').attr('src') === 'images/bg/06.jpg') {
       $('.mbBgndGallery').on('click', function() {
           window.location = "someURL.com";
       });
    }
 }, 1350);

使用jQuery:的.click（）

$('.mbBgndGallery').click(function() {
    $(this).find('img').each(function() {
        if( $(this).attr('src') == 'images/bg/06.jpg' )
            DO CLICK STUFF
    });
});
相关文章：