Simple Carousel Beispiel von Google

War ich auf der Suche für ein einfaches Karussell-B. in Google und stieß ich auf eine und Ihre link ist :

http://jsfiddle.net/paulmason411/TZy7A/2/

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var $slider = $('.slider'); //class or id of carousel slider
var $slide = 'li'; //could also use 'img' if you're not using a ul
var $transition_time = 1000; //1 second
var $time_between_slides = 4000; //4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

//set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

//auto scroll 
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; //loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
);
</script>



<style>

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}
</style>



</head>





<body>


<ul class="slider">
  <li>
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
  </li>
</ul>


</body>
</html>

Jedoch erstellte ich eine Editor-Datei mit .html-Erweiterung, und fügte hinzu, alle diese code gibt es und versuchte, es zu öffnen im browser und funktioniert nicht. Könnten Sie bitte lassen Sie mich wissen, warum es nicht funktioniert für mich.

Dies ist der code, dies ist die exakte Kopie von dem, was Sie sehen in dem obigen link.

Welche Fehler machen Sie? Haben Sie versucht, zu Debuggen über die Konsole?
Habt Ihr versucht, verschieben Sie Ihre script-tag nach Ihrer UL-tag?
Gehen Sie auf die fiddle und das anzeigen der Quelle der Inhalts-frame. Sie werden sehen, einige kleine Unterschiede, die Auswirkungen auf das Verhalten. Wie OnDomReady auslösen...
Für einen start, die Sie übersehen haben das http: von der Referenz auf jQuery.
Ich bekomme keine Fehler, aber Ihr zeigt nichts an. Nur ein leerer Bildschirm.

InformationsquelleAutor Isaac | 2013-04-26

  1. 1

    Ihnen gerade benötigt, um den code innerhalb $(document).ready() Diese ermöglicht, verhindert, dass das Skript ausgeführt, bis das Dokument vollständig geladen.

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
  var $slider = $('.slider'); //class or id of carousel slider
  var $slide = 'li'; //could also use 'img' if you're not using a ul
  var $transition_time = 1000; //1 second
  var $time_between_slides = 4000; //4 seconds

  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();

  //set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  //auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; //loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});
</script>

<style>

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}
</style>



</head>





<body>


<ul class="slider">
  <li>
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
  </li>
</ul>


</body>
</html>
    Ich danke Ihnen so sehr. Es funktioniert. Das ist, weil ich nicht "http:" und das Dokument.bereit. Vielen Dank Jungs. Wirklich geschätzt.
    Kein problem, gerne zur Verfügung

    InformationsquelleAutor Colin Bacon

  2. 4

    Ihr Problem ist, dass Sie nicht über eine fertige Funktion. Müssen Sie haben, in der es vor dir machen kann, keine jQuery-Aufrufe.

        <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>

    $(function(){
    var $slider = $('.slider'); //class or id of carousel slider
    var $slide = 'li'; //could also use 'img' if you're not using a ul
    var $transition_time = 1000; //1 second
    var $time_between_slides = 4000; //4 seconds

    function slides(){
      return $slider.find($slide);
    }

    slides().fadeOut();

    //set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    //auto scroll 
    $interval = setInterval(
        function(){
          var $i = $slider.find($slide + '.active').index();

          slides().eq($i).removeClass('active');
          slides().eq($i).fadeOut($transition_time);

          if (slides().length == $i + 1) $i = -1; //loop to start

          slides().eq($i + 1).fadeIn($transition_time);
          slides().eq($i + 1).addClass('active');
        }
        , $transition_time +  $time_between_slides 
    );
}
    </script>



    <style>

    .slider {
      margin: 10px 0;
      width: 580px; /* Update to your slider width */
      height: 250px; /* Update to your slider height */
      position: relative;
      overflow: hidden;
    }

    .slider li {
      display: none;
      position: absolute; 
      top: 0; 
      left: 0; 
    }
    </style>



    </head>





    <body>


    <ul class="slider">
      <li>
        <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
      </li>
    </ul>


    </body>
    </html>

    Einen Hinweis über jsfiddle ist, dass die Ankündigung der "onDomReady" ausgewählt ist in den Frameworks und Erweiterungen - fiddle automatisch umbrochen Ihr code in ein Dokument bereit.

    Prost!

    InformationsquelleAutor Drew Dahlman

Schreibe einen Kommentar