11548 sujets

JavaScript, DOM et API Web HTML5

Slideshow automatique [Jquery]

Bonsoir,

Je débute avec Jquery, j'ai un petit script simple qui, au survol d'une balise <li>, change le slide situé au dessus.
Tout fonctionne très bien, mais je souhaiterais implémenter un système de boucle, qui en quelque sorte, toutes les x secondes, déclencherait ma fonction de survol de <li> sur chacun de ceux-ci. Et si je passe ma souris sur un des <li>, la boucle se stopperait.

J'ai pas mal cherché, j'ai regardé notamment du coté de SetInterval(); ou delay(); mais je ne sais pas comment partir pour procéder à ce type d'animation en boucle.
Auriez vous une petite idée ?
Je vous joins mon code pour que vous puissiez regarder.

Merci.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>

$(function () {

    $("#switches li").mouseenter(function () {
        var $this = $(this);
        $this.css("cursor","pointer");
        $("#slides > div").hide();

        $(".slide" + $this.attr("class").replace(/switch/, "")).fadeIn("slow");
        
        $("#switches li").css("font-weight", "normal");
        $this.css("font-weight", "bold");
    });
});

</script>


<style type="text/css">
.slide1,.slide2,.slide3,.slide4,.slide5{
    width:760px;
    background:blue;
    overflow:hidden;
    height:250px;
}

.encart_texte{
    float:right;
    width:350px;
}
#slides{
position:relative;
}
#switches{
    margin:20px 0 0 0;
	position:relative;
}
.switch1,.switch2,.switch3,.switch4{
    width:156px;
    float:left;
    background:red;
    min-height:167px;
}

.switch5{
    width:136px;
    float:left;
    background:red;
    min-height:167px;
}
.encart_secteur_contenu{
    width:136px;
    background:green;
}
</style>
</head>

<body>
<div id="slides">
            
            <div class="slide1">
                <h4>Je veux ca</h4>
                    <div class="encart_texte">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                        has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                        took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
                        </p>
                    </div>
            </div>
       
            <div class="slide2" style="display:none;">
                 <h4>Puis ca</h4>
                    <div class="encart_texte">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                        has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                        took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
                        </p>
                    </div>
            </div>

 
            <div class="slide3" style="display:none;">
                <h4>Et ca</h4>
                    <div class="encart_texte">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                        has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                        took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
                        </p>
                    </div>
            </div>
                
       
            
            <div class="slide4" style="display:none;">
               <h3>Et aussi ca</h3>
                    <div class="encart_texte">
                        <h4>Lorem Ipsum is simply dummy </h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                        has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                        took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
                        </p>
                    </div>
            </div>

         

            <div class="slide5" style="display:none;">
               <h3>Finalement ca</h3>
                    <div class="encart_texte">
                        <h4>Lorem Ipsum is simply dummy </h4>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                        has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                        took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
                        </p>
                    </div>
            </div>

        </div>

        <ul id="switches">
            <li class="switch1" style="font-weight:bold;">
                <div class="encart_secteur_contenu">
                    <h5>Lorem ipsum</h5>
                </div>
            </li>
            <li class="switch2" style="font-weight:bold;">
                <div class="encart_secteur_contenu">
                    <h5>Lorem ipsum</h5>
                </div>
            </li>
            <li class="switch3" style="font-weight:bold;">
                <div class="encart_secteur_contenu">
                    <h5>Lorem ipsum</h5>
                </div>
            </li>
            <li class="switch4" style="font-weight:bold;">
                <div class="encart_secteur_contenu">
                    <h5>Lorem ipsum</h5>
                </div>
            </li>
            <li class="switch5" style="font-weight:bold;">
                <div class="encart_secteur_contenu">
                    <h5>Lorem ipsum</h5>
                </div>
            </li>
        </ul>
</body>
</html>
Sujet clos
Aller à