JQuery функции, setInterval или созданная функция, не работает

Question

JQuery функции, setInterval или созданная функция, не работает

0

Я пытаюсь создать слайд-шоу на веб-странице. Я наклеил весь код на всякий случай, когда я что-то пропустил. Я попытался включить библиотеку jquery по ссылке и файлу. Я также пытался включить js-код в html и как отдельный файл, но все равно никаких результатов. Показывая только кнопки и изображения, я удалял дисплей: ни одна деталь в стиле и изображениях не существует.

   <!DOCTYPE html>
    <html>
    <head
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
    </script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/
                                 1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/
                 1.10.4/jquery-ui.min.js">
    </script>
    <script type="text/javascript" src="js\jquery.js">
    </script>
    <style type="text/css">

    .slider{
        width: 600px;
        height: 350px;
        margin: 30px auto;
        background-image: url(ajax-loader.gif);
        background-position: center;
        background-repeat: no-repeat;
    }

    .slider img{
        width: 600px;
        height:350px;
        display: none;
    }

    .shadow{
        background-image: url(C:\Users\socsci1\Desktop\slider\
                              images\shadow.png);
        background-repeat: no-repeat;
        background-position: top;
        width: 664px;
        height: 144px;
        margin: -60px;
    }

    a{
        padding: 5px 10px;
        background-color: #F0F0F0;
        margin-top: 30px;
        text-decoration: none;
        color: #555;
    }
    a.right {
        float: right;
    }
    a.left {
        float: left;
    }

    </style>


    <script type="text/javascript">

    function Slider (){
        $(".slider#1").show("fade",500);
        $(".slider#1").delay(5500).hide("slide",{direction:'left'},500);

    var sc = $(".slider img").size();
    var count = 2;

        setInterval(function(){
        $(".slider#"+count).show("slide",{direction: 'right'},500);
        $(".slider#1").delay(5500).hide("slide",{direction:'lefty'},500);

        if (count == sc) {
            count = 1;
        }else {
            count = count+1;
            }
        },5000);
    }
    </script>
    </head>

    <body onload="Slider();">

    <div class ="slider">
            <img id="1" src="images/number-1.jpg" border="0" />
            <img id="2" src="images/number-2.jpg" border="0" />
            <img id="3" src="images/number-3.png" border="0" />
            <img id="4" src="images/number-4.jpg" border="0" />
        <a href="#" class="left">Previous</a>
        <a href="#" class="right">Next</a>
    </div>

    <div class="shadow"></div>

    </body>
    </html>

user3241846 18 июнь 2014, в 18:13

Источник

2

Идентификаторы не должны состоять исключительно из цифр. HTML5 позволяет это, но это все еще не очень хорошая идея.
Niet the Dark Absol 18 июнь 2014, в 15:46
1

Кроме того, идентификаторы являются уникальными, поэтому вам не нужно указывать класс. Поэтому $ ('. Slider # 1') можно просто сделать $ ('# 1').
msquitieri 18 июнь 2014, в 15:49
0

В чем проблема? что не работает? Вы получаете какие-либо ошибки JS? предоставьте ссылку на живую версию (скрипка или кодовая ручка также будут работать)
LorDex 18 июнь 2014, в 15:49
0

@LorDex Я отредактировал пост, чтобы включить его. Поскольку я не работаю в компиляторе, просто проверяю html-файл с помощью веб-браузера.
user3241846 18 июнь 2014, в 15:55
0

size () устарела, используйте длину. у вас есть несколько JQuery Vesions.
gulty 18 июнь 2014, в 16:00

Показать ещё 3 комментария

Теги:

jquery

css

html5

1 ответ

Ещё вопросы

Идентификаторы не должны состоять исключительно из цифр. HTML5 позволяет это, но это все еще не очень хорошая идея.
Кроме того, идентификаторы являются уникальными, поэтому вам не нужно указывать класс. Поэтому $ ('. Slider # 1') можно просто сделать $ ('# 1').
В чем проблема? что не работает? Вы получаете какие-либо ошибки JS? предоставьте ссылку на живую версию (скрипка или кодовая ручка также будут работать)
@LorDex Я отредактировал пост, чтобы включить его. Поскольку я не работаю в компиляторе, просто проверяю html-файл с помощью веб-браузера.
size () устарела, используйте длину. у вас есть несколько JQuery Vesions.

Tristan Warner-Smith · Accepted Answer · 2014-06-18T13-14-00.000Z

Кажется, вам не хватает места в вашем селекторе, что означает, что вы настроите таргетинг на неправильном уровне.

Чтобы нацелить ребенка родителя на родительский класс, вы используете: $('.parentclass childSelector') - обратите внимание на пробел - где childSelector в вашем случае - #1. Это дает вам $('.slider #1').

В вашем случае, и, как указывает msquitieri, вы используете Id который должен быть уникальным в вашем HTML. Поэтому вы можете найти его непосредственно $ ("# 1"), например. Преимущество использования родительского селектора заключается в том, что он сужает контекст поиска, который вы делаете, что может быть полезно, если у вас будет большой DOM, который будет пройден.

Для вашей проблемы (не видя каких-либо изображений) другие возможности для просмотра:

Убедитесь, что вы ожидаете готовности jQuery перед вызовом методов. Я обычно использую $(document).ready(function { }); как синтаксис. Это может быть проблемой, если страница отображается до того, как файлы javascript завершили загрузку.
Проверьте правильность оформления изображений, т.е. Правильно ли они отображаются без javascript.

Подумайте о создании JSFiddle для нас, разместите изображения и минимальные html, css и js там. Это поможет нам помочь вам и, вероятно, поможет вам снова пройти процесс.