Полное фоновое изображение слайд-шоу jquery, хотите, чтобы последнее изображение слайд-шоу было интерактивным

Question

Полное фоновое изображение слайд-шоу jquery, хотите, чтобы последнее изображение слайд-шоу было интерактивным

0

Это может быть вопрос новичков, так что простите меня, если ответ очевиден. Я сделал поиск, чтобы избежать повторного запроса, но то, что я хочу, очень специфично, я хочу знать, возможно ли его достичь.

У меня есть слайд-шоу с фоновым изображением, используя следующий код 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

Последнее изображение, image06 Я хочу, чтобы он был доступен для кликов, что именно мне нужно добавить в код для достижения этого эффекта. Я хочу связать его с разделом на моей странице и добавить класс прокрутки.

user3050199 29 нояб. 2013, в 19:01

Источник

Теги:

javascript

jquery

html

css

image

2 ответа

Ещё вопросы

David Aguirre · Answer 1 · 2013-11-29T15-54-00.000Z

Похоже, что слайд-шоу устанавливает фон с div-классом "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);

ryan0319 · Answer 2 · 2013-11-29T15-26-00.000Z

Используйте.click() для jQuery:

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