Défilement de div avec JavaScript

Question

Défilement de div avec JavaScript

Demandé el 20 de Décembre, 2012: Quand la question a-t-elle été
675 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie d'afficher une division à la fois et de les faire défiler à l'infini. J'ai modifié un fiddle que j'ai trouvé et je l'ai fait fonctionner sur fiddle, mais pour une raison quelconque, je ne peux pas mettre en œuvre une simple page de test avec le fiddle. Il n'y a tout simplement pas de défilement des divs.

Voici le violon : http://jsfiddle.net/Twistar/d6nZP/86/

Et voici mon code implémenté :

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <script type="text/javascript" src="includes/headers/jquery.min.js"></script>
    <script type="text/javascript">

    function go() {
        var visibleBox = $('#container .boxes:visible');
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) {
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }
        setInterval(go, 1000);
    </script>
</head>

<body>
    <div id="container">
        <div class="boxes" style="display:">first box</div>
        <div class="boxes" style="display:none;">second box</div>
        <div class="boxes" style="display:none;">third box</div>
        <div class="boxes" style="display:none;">forth box</div>
    </div>
</body>

Quelqu'un peut-il me dire ce que je fais mal ?

Demandé el 20 de Décembre, 2012 par Twistar

Answer 1

4 Réponses

Answer 2

2voto

balexandre Points 36115

Je me contenterais probablement d'une solution simple et je choisirais quelque chose comme ça : http://jsbin.com/osepim/1/

$(function() {

  // hide all and show first
  $(".boxes").hide().first().show();

  setInterval(function(){
    moveNext();
  }, 1000);

});

function moveNext() {
  var box = $(".boxes:visible"),
      nextBox = box.next();

  if(nextBox.length === 0)
    nextBox = $(".boxes:first");

  //hide all
  $(".boxes").hide();

  // show next
  nextBox.fadeIn();
}

Répondu el 20 de Décembre, 2012 par balexandre (36115 Points )

Answer 3

2voto

Jai Points 23908

I am guessing that you have a working fiddle but on your local test page its not working

votre bidouille fonctionne parce que vous avez sélectionné les gestionnaires par défaut des dropdowns de la main gauche et cela ne fonctionne pas sur votre page de test parce que votre gestionnaire jquery est manquant.

la raison est you are missing the document ready handler here :

$(function(){
    setInterval(go, 1000);
});

Essayez de le remplacer par celui-ci et voyez si ça marche.

Répondu el 20 de Décembre, 2012 par Jai (23908 Points )

Answer 4

2voto

Moes Points 1665

Vous devez envelopper votre code javascripts avec l'événement "ready". $(document).ready() ou utiliser la version courte $() et cela n'exécutera vos codes que lorsque la page aura fini de se charger. Vos codes devraient donc ressembler à quelque chose comme ceci

$(function(){
   function go() {
        var visibleBox = $('#container .boxes:visible');
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) {
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }
        setInterval(go, 1000);

});

Répondu el 20 de Décembre, 2012 par Moes (1665 Points )

Answer 5

1voto

TheBlackBenzKid Points 6248

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<style type="text/css">.boxes{display:none}</style>
</head>

<body>
<div id="container">
        <div class="boxes">first box</div>
        <div class="boxes">second box</div>
        <div class="boxes">third box</div>
        <div class="boxes">forth box</div>
</div>
<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript">
    function go() {
        var visibleBox = $('#container .boxes:visible'); // GET THE DIV
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) { // SHOW NEXT ITEM
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }
    setInterval(go, 1000); // MS SECOND OF LOOP
</script>
</body>
</html>

Répondu el 20 de Décembre, 2012 par TheBlackBenzKid (6248 Points )

Défilement de div avec JavaScript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Défilement de div avec JavaScript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: