Javascript ou JQuery pour le diaporama de l'image d'arrière-plan

Question

Je veux créer un diaporama en utilisant l'image d'arrière-plan d'un div. Je ne veux pas que les images tournent automatiquement, mais je veux utiliser les boutons standard prev et next pour changer l'image de fond de la div. Au total, il y aura environ 6 images à faire défiler. Il doit être une image de fond car le div a un autre contenu.

Pensez que ceci peut être réalisé en utilisant JQuery mais vous ne savez pas comment.

J'ai le code suivant qui pivote automatiquement à travers les images, mais je ne veux pas qu'elles changent automatiquement. Je dois pouvoir faire défiler les images en utilisant les boutons suivant et précédent.

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++; 
}; 

Quelqu'un peut-il m'aider?

Answer 1

Jetez un oeil à Gallerific (plugin jQuery) très slick.

Super simple à mettre en œuvre, il vous suffit de mettre vos images dans une liste non ordonnée (UL) (dans l'exemple ci-dessous le "thumbs-min" est l'UL), puis faire quelque chose comme ça;

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

Collection de diaporama jQuery plugins liés here .Might être quelque chose comme Supsersized est ce que vous cherchez.

Answer 2

<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> 

Answer 3

Vous pouvez utiliser un plugin JCaroussel Lite par exemple: http://www.gmarwaha.com/jquery/jcarousellite/

Answer 4

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>