Javascript или JQuery для слайд-шоу фоновых изображений - PullRequest
Новая
       22

Javascript или JQuery для слайд-шоу фоновых изображений

0 голосов
/ 08 октября 2009

Я хочу создать слайд-шоу, используя фоновое изображение div. Я не хочу, чтобы изображения вращались автоматически, вместо этого я хочу использовать стандартные кнопки «предыдущий» и «следующий», чтобы изменить фоновое изображение div. Всего будет пролистано около 6 изображений. Это должно быть фоновое изображение, так как в div есть другое содержимое.

Думаю, что этого можно добиться с помощью JQuery, но не знаю, как.

У меня есть следующий код, который автоматически перемещается по изображениям, но я не хочу, чтобы они менялись автоматически. Мне нужно иметь возможность прокручивать изображения с помощью кнопок «Вперед» и «Назад». 

var bgArr = ["images/img-restaurante-2.jpg", "images/img-restaurante-3.jpg", "images/img-restaurante-4.jpg", "images/img-restaurante-5.jpg", "images/img-restaurante-1.jpg"];
var i = 0;

// Start the slide show
var interval = self.setInterval("swapBkgnd()", 20000);

function swapBkgnd() {
    if (i > (bgArr.length - 1)) {
        i = 0
        $("#restaurante").css("background-image", "url(" + bgArr[i] + ")");
    } else {
        $("#restaurante").css("background-image", "url(" + bgArr[i] + ")");
    }
    i++;
};

Кто-нибудь может мне помочь?

Ответы [ 4 ]

1 голос
/ 09 октября 2009 
<script type="text/javascript">

    var bgArr = ["images/img-restaurante-2.jpg", "images/img-restaurante-3.jpg", "images/img-restaurante-4.jpg", "images/img-restaurante-5.jpg", "images/img-restaurante-1.jpg" ]; 
    var i=0;

    // Start the slide show
    setInterval(function() {
        $("#restaurante").css("background-image", "url("+bgArr[i]+")");
        (i < bgArr.length-1) ? i++ : i=0 
    }, 20000); 

</script>
0 голосов
/ 29 октября 2010 
var bgArr = ["images/img-restaurante-2.jpg", "images/img-restaurante-3.jpg", "images/img-restaurante-4.jpg", "images/img-restaurante-5.jpg", "images/img-restaurante-1.jpg" ]; 
var i=0;



function next()
{
  i = (i== bgArr.length-1 ? 0 : i++);
  $("#restaurante").css("background-image", "url("+bgArr[i]+")");
}
function prev()
{
  i = ( i==0 ? bgArr.length-1 : i--);
  $("#restaurante").css("background-image", "url("+bgArr[i]+")");
}


<a href="Prev" onclick="prev()">Prev</a>
<a href="Next" onclick="next()">Next</a>
0 голосов
/ 01 декабря 2009

Вы можете использовать плагин JCaroussel lite, например: http://www.gmarwaha.com/jquery/jcarousellite/

0 голосов
/ 08 октября 2009

Взгляните на Gallerific (плагин jQuery) очень пятно .

Очень просто реализовать, вы просто помещаете свои изображения в неупорядоченный список (UL) (в приведенном ниже примере "thumbs-min" - UL) и затем делаете что-то вроде этого; 

    $(document).ready(function() {              
    // Initialize Minimal Galleriffic Gallery
    $('#gallery').galleriffic('#thumbs-min', {
    imageContainerSel:      '#slideshow',
    controlsContainerSel:   '#controls'
    });
});

Коллекция плагинов, связанных со слайд-шоу jQuery здесь . Может быть, что-то вроде Supsersized - это то, что вы ищете.

...