Изображение не указано

Можете ли вы мне помочь? Поскольку я новичок в использовании javascript, я скопировал код с определенного сайта (это бесплатно, чтобы скопировать код. И я восхищаюсь кодером.). Это назначение будет завтра, поэтому у меня нет времени для исследования этого. Не могли бы вы мне помочь. Btw, Это мой первый пост. Пожалуйста, будьте осторожны при ответе. Заранее спасибо.Изображение не указано

Это HTML

<html> 
    <head> 
     <title>Sample</title> 
     <link rel="stylesheet" type="text/css" href="sample.css"> 
    </head> 
    <body> 
    <script type="text/javascript" src="sample.js"></script> 
    <div id="container"> 
     <h1>A really simple slideshow</h1> 
     <ul class="slider"> 
     <li><img src="images/garmin1.jpg" height="337" width="600" /></li> 
     <li><img src="images/garmin2.jpg" height="337" width="600" /></li> 
     <li><img src="images/garmin1.jpg" height="337" width="600" /></li></ul> 
     <p>I went to see <a href="http://trailers.apple.com/trailers/wb/gravity/" title="   Watch the Gravity trailer">Gravity</a> today. It was amazeballs.</p> 

</div> 
    </body> 
</html>

Это CSS

body { 
    font: 1em/125% tahoma, sans-serif; 
    background:#111; 
    color:#c8c8c8; 
} 

#container { 
    width:600px; 
    padding:20px; 
    margin:0 auto; 
} 

h1 { 
    font-size:2em; 
    padding-bottom:.5em; 
    border-bottom:1px solid #cecece; 
} 

h1, p { 
    margin: .8em 0; 
} 

a { 
    text-decoration:none; 
    font-style:italic; 
    color:#cecece; 
    transition:all .5s; 
} 

a:hover { 
    color:#eeeeee; 
} 

.slider { 
    position:relative; 
    height:337px; 
    overflow:hidden; 
} 

.slider li { 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
}

Это Javascript

$(function(){ 
    var $slider = $('.slider'); 
    var $slide = 'li'; 
    var $delayTime = 1000;//fade in time 
    var $transitionTime = 3000; 

    function Slides() { 
    return $slider.find($slide); 
    } 

    Slides().fadeOut(); 

    Slides().first().addClass('active').fadeIn(); 

    //Auto scroll 
    $interval = setInterval(function(){ 
    var $i = $slider.find($slide + '.active').index(); 
    Slides().eq($i) 
     .removeClass('active') 
     .fadeOut($transitionTime); 

    if(Slides().length == $i + 1) { 
     $i=-1; 
    } 

    Slides().eq($i + 1) 
     .fadeIn($transitionTime) 
     .addClass('active'); 

    }, $transitionTime + $delayTime); 


});

источник

2014-10-12 Julius Mercado

я совет делает jsfiddle, это бесплатно;): http://jsfiddle.io –

URL-адреса, которые вы использовали в 'src' ваших тегов' img', являются относительными путями. Убедитесь, что изображения находятся в нужном месте (в каталоге 'images' рядом с документом HTML, который вы вызываете в своем браузере). –

можете ли вы прикрепить изображение иерархии папок? –

Я проверил ваш код с хорошими результатами. Вот мой testing fiddle:

YOUR SLIDESHOW FIDDLE

Вы только должны убедиться, что:

пути к изображениям правильны
загружаемой Jquery

Надежда это помогает!

источник

2014-10-12 14:26:45 p2or

Я вижу, что вы сделали это так, как я хочу. Я уверен, что изображения находятся в правильном месте. Одна вещь, о которой я не уверен ... если я правильно загружаю jquery? Что мне нужно учитывать? –

Существует несколько способов сделать это. Вы можете разместить jquery на своем сервере или загрузить его на удаленном компьютере. Вы можете загрузить его на свой сайт в разделе или нижнего колонтитула. Но в первый раз все, что вам нужно знать, находится здесь: http://www.w3schools.com/jquery/jquery_install.asp – p2or

После загрузки вашей страницы проверьте свою консоль браузера, если определена переменная 'jQuery'. Если это не так, JQuery не загружается. Поскольку, кажется, вы предоставили нам весь ваш HTML-файл, мы видим, что вы даже не вызываете скрипт JQuery, попробуйте сделать это. –

Я считаю, что вы пропустили включение библиотеки JQuery в свой HTML.

Просто добавьте следующую строчку <head></head> вашего HTML,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Для лучшего понимания проверки here ...

источник

2014-10-12 14:47:13

Спасибо. Я добавил эту строку к самой верхней части моего раздела. Теперь это работает как шарм. –

Вы могли бы принять/отменить мой ответ: ;-) –

Изображение не указано

ответ

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