Проблема со слайд-шоу Jquery - PullRequest
Новая
       1

Проблема со слайд-шоу Jquery

0 голосов
/ 23 мая 2011

Я не спал всю ночь, пытаясь разрешить слайд-шоу JQuery, но я не уверен, почему он работает не так, как ожидалось.Я забыл привести пример, но сейчас мой ноутбук не со мной, поэтому я опубликую его позже, через несколько часов, если вам нужно посмотреть пример.

Я позаимствовал функцию плагина: http://medienfreunde.com/lab/innerfade/

    <script>

                   jQuery.noConflict();
                   $(document).ready( function(){
                   $('li#slider_reel').innerfade({
                   animationtype:'fade',
                   speed: 'slow',
                   timeout: 4000,
                   type: 'sequence',
                   containerheight: '648px'; });

                   });

                   </script>


    <div id="slider_view">
    <div id="slider_reel">

    <ul>
    <li><img src="slide/A.jpg"></li>
    <li><img src="slide/B.jpg"></li>
    <li><img src="slide/C.jpg"></li>
    <li><img src="slide/D.jpg"></li>
    </ul>
    </div>
    </div>
    <!--end reel-->

ul#slider_reel li img{
    border: 1px solid #ccc;
    padding: 4px;
}


.fade{
    margin-bottom: 2em;
}

.fade p{
    margin-bottom: 2em;
    text-align: center;
    width: 100%;
    background: #fff;
}

Результат: все изображения отображаются в длинном вертикальном порядке (как стопка или стопка друг друга).Не могу понять, почему он так себя ведет.Заранее благодарю за помощь

РЕДАКТИРОВАТЬ Мои извинения.У него были ul и li - я забыл добавить их внутрь.получил тот же результат.

РЕДАКТИРОВАТЬ II Наконец-то все заработало.я думаю, что пропустил некоторые '}' или что-то еще, а также я заменил сценарий с реальным файлом вместо href.

Большое спасибо за помощь!

Ответы [ 3 ]

0 голосов
/ 23 мая 2011

Проблема, вероятно, здесь, в вашем CSS: 

ul#slider_reel li img{
    border: 1px solid #ccc;
    padding: 4px;
}

Копирование + вставка кода не очень хорошая идея. Это правило вообще не применяется, поскольку у вас нет элемента ul с id, равным slider_reel. У вас есть div теги.

Я бы попытался заранее спрятать изображения, а затем запустить их: 

$('#slider_reel img').hide();
// Innerfade code
0 голосов
/ 23 мая 2011

у меня это работает, http://jsfiddle.net/BceNn/6/

Одна из проблем: 

containerheight: '648px'; /*REMOVE THIS SEMICOLON*/ });/*REMOVE THIS SEMICOLON*/

РЕДАКТИРОВАТЬ: Вот рабочий код. 

<script type="text/javascript">
$(document).ready( function(){
    $('#slider_reel').innerfade({
        animationtype:'fade',
        speed: 'slow',
        timeout: 4000,
        type: 'sequence',
        containerheight: '648px' 
    })
});
</script>


    <ul id="slider_reel">
    <li><img src="slide/A.jpg"></li>
    <li><img src="slide/B.jpg"></li>
    <li><img src="slide/C.jpg"></li>
    <li><img src="slide/D.jpg"></li>
    </ul>
0 голосов
/ 23 мая 2011

исправьте ваши селекторы, там нет ни UL, ни LI, затем повторите попытку

...