Первое изображение не отображается в JS/JQ slidshow

Я пытаюсь сделать слайд-шоу javascript с использованием некоторого javaquery, первое изображение не исчезает, как должно, и, очевидно, ни одно из других изображений не скользит и не выходит. Это моя первая попытка сделать одну из них, поэтому я не совсем уверен, почему она не работает. Я просматривал код, чтобы убедиться, что все правильно написано и все правильные знаки препинания, но я Думаю, я все еще мог что-то упустить. В любом случае мой код.Первое изображение не отображается в JS/JQ slidshow

HTML5

<head> 
    <title>Home Styles</title> 

    <link rel="stylesheet" href="CSS/index.css" type="text/css"/> 
    <link rel="stylesheet" href="CSS/style.css" type="text/css"/> 
    <link rel="shortcut icon" href="Images/favicon-logo-HS.ico"/> 

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <meta name="viewport" content="with=device-width, initial-scale=1.0"> 

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="JS/slider.js"></script> 
</head> 

<body onload="Slider();" class="body"> 

      <div class="slider"> 
       <img id="1" src="Images/slide_image1.jpg" alt="TV Deals"/> 
       <img id="2" src="Images/slide_image2.jpg" alt="Furniture Deals"/> 
       <img id="3" src="Images/slide_image3.jpg" alt="Electronic Deals"/> 
      </div>

CSS3

.slider { 
    width: 990px; 
    height: 270px; 
    overflow: hidden; 
    margin: 30px auto; 
    background-image: url('../Images/ajax-loader.gif'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

.slider img{ 
    width: 990px; 
    height: 270px; 
    border: 0; 
    display: none; 
}

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 #"+count).delay(5500).hide("slide", {direction: 'left', 500); 

     if(count == sc){ 
      count = 1; 
     }else{ 
      count = count + 1; 
     } 
    }, 6500); 
}

источник

2014-01-29 SecretWalrus

Вы уезжаете из каких-то код или вы просто не закрыть '' тега? – akousmata

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

любые ошибки в консоли при загрузке страницы? –

Итак, есть несколько вещей происходит с JS, которые могли бы быть вопрос здесь. Во-первых, быстрый JShint сообщает мне, что есть некоторые синтаксические ошибки (отсутствующие точки с запятой и т. П.). Но я думаю, что реальная проблема заключается в том, что вы используете некоторые из этих методов с не умолчанию, но не определяете новые.

Например, .hide() не имеет «слайд-шоу». http://api.jquery.com/hide/. Я читал через API для .show() и .hide() вам, вероятно, нужно заменить их .animate()

Вот это решение, которое может работать для вас: EXAMPLE FIDDLE

HTML:

<div class="slider"> 
    <img id="1" src="http://www.placehold.it/500x300&text=Slide1" alt="TV Deals"/> 
    <img id="2" src="http://www.placehold.it/500x300&text=Slide2" alt="Furniture Deals"/> 
    <img id="3" src="http://www.placehold.it/500x300&text=Slide3" alt="Electronic Deals"/> 
    </div>

JS:

$(document).ready(function() { 
    slider(); 
}); 

function slider(){ 
    var count = 1; 

    $('#1').show(); 

    (function slide(){ 
     $('.slider img').hide(); 

     if (count > 3) {count = 1;} // makes this a loop 

     $('#'+count).fadeIn('slow'); 
     count += 1; 

     setTimeout(function() { 
      slide(); 
     }, 5000); 
    })(); 
}

Я использую setTimeout() вместо setInterval() из-за личных предпочтений (интервал может перекрывать вызовы функций). Вы также можете удалить .fadeIn() в моем примере и заменить его на .animate(), чтобы получить тот эффект горизонтального слайда, который вы хотели.

источник

2014-01-29 20:43:02 badAdviceGuy

Ну, ваш, очевидно, работает в jsfiddle, но он все еще не тянет первое изображение в моей работе. Я благодарю вас за то, что вы нашли время, чтобы попытаться мне помочь. – SecretWalrus

@SecretWalrus, если он работает в скрипке, но не в вашей локальной среде, что бы я сделал, это прокомментировать весь ваш код и разоблачить каждый бит отдельно и найти, где он ломается. Поскольку вы знаете, что он должен работать. – badAdviceGuy

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

Посмотрев на это в jsfiddle и удалив все лишние вещи, которые jsfiddle не хочет, я заметил, что вам не хватает закрывающей скобки. Я не понимаю, как вы не могли получать ошибки консоли вызвать это ошибка синтаксиса:

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

http://jsfiddle.net/mF7wv/

источник

2014-01-29 20:46:24 akousmata

исправил эту ошибку, и она по-прежнему не вытаскивает первое изображение. – SecretWalrus

badAdviceGuy имеет рабочее решение, я бы посмотрел на его примерную скрипку. Мое решение и скрипка также работают. Если вы хотите, чтобы мы исправляли ваш код для вас, создайте скрипту для тестирования. – akousmata

Первое изображение не отображается в JS/JQ slidshow

ответ

Смежные вопросы