ICI header("Location: http://www.mytesting.fr ");

Comment créer un slide show.

par André MARINI 2 Décembre 2015, 07:54 Astuces de blogueur

On peut bien entendu compliquer à l'extrême le présent code mais voici celui de base qui permet de créer un mouvement alternatif avec deux images.

La première étant l'écriture 1

La deuxième étant la photo + l'écriture 2.

 

A noter que sur un blog à marge gauche ou droite,  le texte apparaît alternativement.

C'est d'ailleurs pour cela que je l'ai créé ainsi.

 

CODE

 

<div id="slideshow"><style>@keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    35% {
        left: -300px; /*2ème image*/
    }
    50% {
        left: -300px; /*idem pour attente*/
    }
    70% {
        left: -300px; /*3ème image*/
    }
    85% {
        left: -300px; /*idem pour attente*/
    }
    100% {
        left: 0px; /*1ère image*/
    }
}</style><style>#slideshow {
    position: relative;
    width: 9300px;
    height: 300px;
    margin:  20px auto;
    overflow: visible;
}
#sContent li {
    display: inline;
}</style><style>#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 9950px;
    margin: 2;            
    padding: 0;
    
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}</style>
    <ul id="sContent"><li><img src="http://data.over-blog-kiwi.com/1/30/51/51/20151202/ob_c9d986_essai4.jpg"></li><li><img src="http://data.over-blog-kiwi.com/1/30/51/51/20151202/ob_ceac38_essai7.jpg"></li>    
        
</ul>
    
</div>

 

RESULTAT

 

commentaires

Haut de page