Пожалуйста, помогите мне в решении JQuery слайд-шоу - PullRequest
Новая
       27

Пожалуйста, помогите мне в решении JQuery слайд-шоу

0 голосов
/ 16 апреля 2011

Я создал слайд-шоу, используя jquery easyslider. Но этого не происходит. Я не могу найти, где именно проблема.

Javascript выглядит следующим образом: 

<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true, 
            continuous: true
        });
    }); 
</script>

.. и соответствующий HTML: 

<div id="slider">
    <ul>                
        <li><img src="Beauty/1.jpg" /></li>
        <li><img src="Beauty/2.jpg" /></li>
        <li><img src="Beauty/3.jpg" /></li>
        <li><img src="Beauty/4.jpg" /></li>
        <li><img src="Beauty/5.png" /></li>         
    </ul>
</div>

Ответы [ 2 ]

0 голосов
/ 16 апреля 2011

у вас есть id="slider" более чем один элемент пытается дать уникальный идентификатор .. я думаю, что это будет работать ...

0 голосов
/ 16 апреля 2011

Код, который вы разместили здесь, работает.Я настроил скрипку: http://jsfiddle.net/jomanlk/jFePh/

При просмотре вашего кода на HTML-страницах возникает пара проблем.

  1. Изображения на самом деле не существуют, так что вы все равно не знаете, работает ли он должным образом

  2. Ваш код показа / скрытия не существуеткажется, работает (toggleMe('para2') я думаю).Это на самом деле не показывает все контейнеры.

  3. #slider остается скрытым, а UL внутри просто продолжает переключаться между pt/px.

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

РЕДАКТИРОВАТЬ

Ваша проблема связана с тем, как easySlider вычисляет размеры.

Вы начинаете с 

<div id="para3" style="display:none">

Когда включается код easySlider, он пытается выяснить размеры.Так как высота и ширина установлены в 0, это означает, что он фактически не может делать слайд-шоу и сдается ( это упрощение )

Это можно увидеть в этой настройке I скрипки: http://jsfiddle.net/jomanlk/jFePh/2/

Решением для этого было бы удалить display:none из ваших DIV и скрыть его с помощью JS ПОСЛЕ загрузки easySlider и выполнения его бита .

Итак, чтобы исправить эту проблему.

  1. Удалите атрибут style и добавьте класс, чтобы он выглядел следующим образом <div id="para1" class="hideMeLater">

  2. Измените JS в верхней части вашегодокумент выглядит так, как показано ниже 

    $(document).ready(function(){   
        $("#slider").easySlider({
           auto: true, 
           continuous: true
        });
        $('.hideMeLater').hide();//hiding all the divs we removed display:none from
    });

Этот должен решить проблему со слайд-шоу.Я настроил скрипку с примером здесь: http://jsfiddle.net/jomanlk/jFePh/3/

В качестве отступления, я предлагаю вам ознакомиться с JS и jquery, чтобы вы понимали, что на самом деле происходит, когда вы включаете плагины.В сети есть несколько отличных учебных пособий.

Кроме того, вы должны очистить свой HTML.

...