SnippetVamp

Parce que yen a marre de chercher ses bouts de code partout...



TODO 1 ajax 3 astuce 64 auto_ 2 bootstrap 14 conversion 2 crossbrowser 3 css 46 debug 10 dothtaccess 1 effets 1 erreurs 1 evenements 2 fallback 1 fichiers 27 filter 1 fonctions 72 form 1 graphisme 11 html 39 javascript 38 jquery 26 lib 2 mail 1 markdown 2 mobile 2 parser 13 php 88 pluXML 4 python 10 responsive 7 securite 16 social 1 texte 16 vanilla 4

.

Make a Simple JavaScript Slideshow without jQuery — SitePoint

Make a Simple JavaScript Slideshow without jQuery — SitePoint

<ul id="slides">
    <li class="slide showing">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
    <li class="slide">Slide 4</li>
    <li class="slide">Slide 5</li>
</ul>


/*
essential styles:
these make the slideshow work
*/

#slides {
    position: relative;
    height: 300px;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}


/*
non-essential styles:
just for appearance; change whatever you want
*/

.slide {
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background: #333;
    color: #fff;
}

.slide:nth-of-type(1) {
    background: red;
}
.slide:nth-of-type(2) {
    background: orange;
}
.slide:nth-of-type(3) {
    background: green;
}
.slide:nth-of-type(4) {
    background: blue;
}
.slide:nth-of-type(5) {
    background: purple;
}


var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}


graphisme html javascript

https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/

<iframe width="100%" height="1694" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=59a013104dc79" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 25/08/2017

Flux RSS de cette page


SnippetVamp 1.83 par Bronco - Page générée en 0.025 s