слайд-шоу изображений с использованием плагина jQuery Cycle

Я пытаюсь сделать слайд-шоу изображений с помощью плагина jQuery Cycle, но он не работает. Как сделать его работоспособным.

Включенные скрипты

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://malsup.github.com/jquery.cycle.all.js"></script>

CSS:

 .pics {  
            height:  232px;  
            width:   232px;  
            padding: 0;  
            margin:  0;  
        } 

        .pics img {  
            padding: 15px;  
            border:  1px solid #ccc;  
            background-color: #eee;  
            width:  200px; 
            height: 200px; 
            top:  0; 
            left: 0 
        }

Скрипт:

  $(function(){
        $('.pics').cycle('fade');
    });​

Пик Див

          <div class="pics">
                <img src="http://davealger.info/i/1.jpg"  width="200" height="200"  />
                <img src="http://davealger.info/i/2.bmp"  width="200" height="200"  />
                <img src="http://davealger.info/i/3.png"  width="200" height="200" />
            </div>

jquery jquery-cycle
person xrcwrn    schedule 04.12.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Измените https://malsup.github.com/jquery.cycle.all.js на http:// или, что еще лучше, загрузите плагин и пощадите его бедный сервер. Google использует CDN большого объема; он не.

http://jsfiddle.net/mblase75/ZSJqh/

person Blazemonger    schedule 04.12.2012
comment
загруженный jquery.cycle.all.js также не показывает слайд-шоу. Изображения отображаются в виде списка - person xrcwrn; 05.12.2012
comment
Если изображения отображаются в виде списка, то плагин jQuery Cycle по какой-то причине не загружается. Проверьте свою консоль и дважды проверьте, что файлы загружаются и в правильном порядке. - person Blazemonger; 05.12.2012
comment
Он загружается правильно, я проверил в Google Chrome - person xrcwrn; 05.12.2012
comment
Дважды проверьте свой селектор. Это все, что я могу предложить, не публикуя ваш текущий код как jsfiddle или что-то в этом роде. - person Blazemonger; 05.12.2012

arrow_upward
1
arrow_downward

Если вы настроены не загружать скрипт локально, следите за обновлениями.

  1. Cycle.js был перемещен.
  2. Не используйте http:// или https://

Вот это было взято из демо-версии веб-сайта и немного отредактировано:

<!-- include jQuery library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="//cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' 
    });
});
</script>

Обратите внимание, что расположение файла cycle.js
Стоит посмотреть на исходные коды демонстраций.

person bobthyasian    schedule 13.12.2012
comment
Я скачал и связал из своей папки, теперь все работает. Проблема была только в отсутствии ссылки на файл jquery.cycle.all.latest.js - person xrcwrn; 13.12.2012
comment
Связывание сценариев имеет важное значение. Использование локальных файлов увеличивает производительность и время загрузки. - person bobthyasian; 13.12.2012

arrow_upward
0
arrow_downward 

$(function(){
    $('.pics').cycle({fx: 'fade'});
});​

См. документы: http://malsup.com/jquery/cycle/.

person long    schedule 04.12.2012