web-dev-qa-db-fra.com

Diaporama JavaScript/HTML simple

Nouveau sur Javascript, mais après quelques recherches, il semble que ce soit la meilleure méthode pour mettre en œuvre le résultat souhaité. J'essaie de produire un diaporama d'images (5 images présélectionnées) qui changent automatiquement entre 5 secondes. Quelqu'un peut-il m'orienter vers un tutoriel ou me guider dans ce processus? Toute aide est fortement appréciée.

javascripthtmlsliderslideshowuislider
8
TopChef

Un plugin de type diaporama très agréable pour jQuery est le http://www.devtrix.net/sliderman/ Il comporte de nombreuses transitions différentes entre les diapositives et est très facile à utiliser.

Il y en a beaucoup, alors une recherche rapide sur Google "jQuery Slideshow" produira des centaines de résultats.

6
Tim B James

Voici un code très simple pour créer un diaporama JavaScript/HTML simple uniquement à l'aide de codes JavaScript et HTML simples: 

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() 
{ 
document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; 
setTimeout("swapImage()",3000); 
} 
window.onload=swapImage; 
</script> 
<img height="200" name="slide" src="image_1.gif" width="400" />
11
shus

Il suffit de google pour les curseurs de contenu javascript

Voici 350 curseurs d'image et de contenu: 

http://www.jqueryrain.com/example/jquery-slider-slideshow/

et voici 25 autres: 

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/ .

4
Michael Durrant

Il existe des milliers d'exemples, certains très complexes et sophistiqués. La difficulté consiste plutôt à en trouver un facile à comprendre pour les débutants.

Après quelques recherches, j'ai trouvé ceci dans css-tricks . (Utilise aussi jquery).

3
T30

Je sais que ceci est un ancien post, mais je partagerais mon tutoriel pour le bénéfice de tous ceux qui rencontreraient cette question à l'avenir.

Diaporama simple

J'espère que cela aidera quelqu'un. C'est un diaporama assez simple et basique, facile à créer/à mettre en œuvre.

Au cas où le lien deviendrait invalide, voici le code: La première étape consiste à configurer le code HTML de la manière suivante:

<div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
 <img src="”img1.png”/">
 <div class="slideText">
 <h2>The Slide Title</h2> 
 <p>This is the slide text</p>
 </div> <!-- </slideText> -->
 </div> <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

Ensuite, nous allons écrire le CSS, qui est comme suit:

img {
 display: block;
 width: 100%;
 height: auto;
}
p{
 background:none;
 color:#ffffff;
}
#slideShow #slideShowWindow {
 width: 650px;
 height: 450px;
 margin: 0;
 padding: 0;
 position: relative;
 overflow:hidden;
 margin-left: auto;
 margin-right:auto;
}

#slideShow #slideShowWindow .slide {
 margin: 0;
 padding: 0;
 width: 650px;
 height: 450px;
 float: left;
 position: relative;
 margin-left:auto;
 margin-right: auto;
 }

#slideshow #slideshowWindow .slide, .slideText {
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
} 
.slideText {
 background: rgba(128, 128, 128, 0.49);
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
 display: block;
 text-indent: -10000px;
 position: absolute;
 cursor: pointer;
}
#leftNav {
 left: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_minus.png");
 background-repeat: no-repeat;
 z-index: 10;
}
#rightNav {
 right: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_green.png");
 background-repeat: no-repeat;
 z-index: 10; }

Comme vous pouvez le constater, ce CSS n’a rien de passionnant ni de compliqué. En fait, les choses ne deviennent pas plus élémentaires, mais je vous promets que tout ce dont vous avez besoin.

Ensuite, nous allons créer le jQuery:

$(document).ready(function () {

 var currentPosition = 0;
 var slideWidth = 650;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 var slideShowInterval;
 var speed = 3000;

 //Assign a timer, so it will run periodically
 slideShowInterval = setInterval(changePosition, speed);

 slides.wrapAll('<div id="slidesHolder"></div>');

 slides.css({ 'float': 'left' });

 //set #slidesHolder width equal to the total width of all the slides
 $('#slidesHolder').css('width', slideWidth * numberOfSlides);

 $('#slideShowWindow')
 .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
 .append('<span class="slideNav" id="rightNav">Move Right</span>');

 manageNav(currentPosition);

 //tell the buttons what to do when clicked
 $('.slideNav').bind('click', function () {

 //determine new position
 currentPosition = ($(this).attr('id') === 'rightNav')
 ? currentPosition + 1 : currentPosition - 1;

 //hide/show controls
 manageNav(currentPosition);
 clearInterval(slideShowInterval);
 slideShowInterval = setInterval(changePosition, speed);
 moveSlide();
 });

 function manageNav(position) {
 //hide left arrow if position is first slide
 if (position === 0) {
 $('#leftNav').hide();
 }
 else {
 $('#leftNav').show();
 }
 //hide right arrow is slide position is last slide
 if (position === numberOfSlides - 1) {
 $('#rightNav').hide();
 }
 else {
 $('#rightNav').show();
 }
 }


 //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
 function changePosition() {
 if (currentPosition === numberOfSlides - 1) {
 currentPosition = 0;
 manageNav(currentPosition);
 } else {
 currentPosition++;
 manageNav(currentPosition);
 }
 moveSlide();
 }


 //moveSlide: this function moves the slide 
 function moveSlide() {
 $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
 }

});
1
M_Griffiths