Плагин цикла JQuery не работает

Question

Я пытаюсь добавить jquery Cycle slideshow плагин на свою страницу с эффектом перехода «fade». Но все же я не мог заставить его работать.

Это мой HTML:

<div class="container"> 
    <div class="slide1"> 
     <blockquote> 
      <span class="leftquotes">&ldquo;</span> He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I was pleased with his creative design and will definitely be hiring him again. <span class="rightquotes">&bdquo; </span> 
     </blockquote> 
     <img src="images/profile.jpg" width="120" height="100" /> 
     <h2>Steve Kruger</h2> 
     <h6>UI/UX Designer at Woof Design Studio</h6> 
     <div class="slide1bottom"></div> 
    </div> 

    <div class="slide2"> 
     <blockquote> 
      <span class="leftquotes">&ldquo;</span> Till the project reaches the finishing line. I recommend him to anyone who wants their work done professionally. project reaches the finishing line. I recommend him to anyone who wants their work done professionally. The project ... <a href="#"> read more</a><span class="rightquotes">&bdquo; </span> 
     </blockquote> 
     <img src="images/images.jpg" width="120" height="100" /> 
     <h2>John Doe</h2> 
     <h6>Developer Relations at Woof Studios</h6> 
     <div class="slide2bottom"></div> 
    </div> 

    <div class="slide3"> 
     <blockquote> 
      <span class="leftquotes "> &ldquo;</span> He promptly completed the task at hand and communicates really well till the project reaches the finishing line. I was pleased with his creative design and will definitely be hiring him again. <span class="rightquotes">&bdquo; </span> 
     </blockquote> 
     <img src="images/summer_school.png" width="120" height="100" /> 
     <h2>Steve Stevenson</h2> 
     <h6>CEO Woof Web Design Studios</h6> 
     <div class="slide3bottom"></div> 
    </div> 
</div> 

Это мой JQuery:

$(function() { 
    $('#container').cycle(); 
}); 

я импортировал JQuery плагин, плагин цикла и ослабление плагин на мою страницу правильно.

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.color.js"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script> 
<script type="text/javascript" src="jscript/jquery.easing.1.3.js"></script> 

Это моя скрипка: http://jsfiddle.net/kRZ5r/

Answer 1

Селектор вы определили для инициализации cycle ищет id, когда он должен будет искать class.

$('.container').cycle({ 
    timeout: 10000 
}); 

Fiddle here

Answer 2

У вас есть эта разметка:

<div class="container"> 

Тем не менее вы используете этот селектор:

$('#container').cycle(); 

# используется для id селекторов, Вы должны были бы использовать ., который является class селектор:

$('.container').cycle(); 

Стоит также отметить, что г-н Alsup выпустила новенький обновление Cycle2 (http://www.malsup.com/jquery/cycle2/), то есть HTML5 совместимы и могут использовать data- атрибуты для Automagic инициализации.

Answer 3

В коде html вы указываете контейнер как класс. но в JQuery вы используете # для определения его как id.

<div class="container"> 
</div> 

$(function() { 
    $('.container').cycle(); 
});