javascript не связывается с html-файлом

Я пытаюсь создать слайдер с помощью jQuery, но у меня возникают трудности с привязкой файла javascript к моему html. Я проверил семантические ошибки, но не могу найти их. Нет проблем с css - только javascript, похоже, не работает.javascript не связывается с html-файлом

<!doctype html> 
<head> 
<title> 
content slider 
</title> 

<link rel="stylesheet" href="css/style.css"> 
<script type="text/javascript" src = "jquery.js"></script> 
<script type="text/javascript" src="js/script.js"></script> 

</head> 
<body> 
<div id="container"> 
<header> 
<h1>JQUERY CONTENT SLIDER</h1> 
</header> 
<img src = "img/left.png" id="prev" alt="prev" > 
<div id="slider"> 
<div class = "slide" > 
<div class = "slide-copy"> 
<h2>slider 1</h2> 
<p background="black">this is slide one</p> 
</div> 
<img src="img/slider.png"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 2</h2> 
<p>this is slide two</p> 
</div> 
<img src="img/slider1.jpg"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 3</h2> 
<p>this is slide three</p> 
</div> 
<img src="img/slider2.jpg"> 

</div> 
<div class="slide " > 
<div class= "slide copy"> 
<h2>slider 4</h2> 
<p background="black">this is slide four</p> 
</div> 
<img src="img/slider3.jpg"> 

</div> 
<div class="slide" > 
<div class= "slide copy"> 
<h2>slider 5</h2> 
<p tex ="black">this is slide five</p> 
</div> 
<img src="img/2722526.png"> 

</div> 
</div> 
<img src = "img/slide-image.png" id="next" alt="next"> 



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

файла JavaScript

$(document).ready(function(){ 
var speed = 500; //fade spped 
var autoswitch = true;//auto slider options 
var autoswitch_speed = 4000; //auto slider speed 

//add initial active class 
$('.slide').first().addclass('active'); 
//hide all slides 
$('.slide').hide(); 
//shpw first slide 
$('active').show(); 

$('#next').on('click',nextslide); 
$('#prev').on('click',prevslide); 
//autoslider handler 
if(autoswitch == true);{ 
    setinterval(nextslide.autoswitch_speed); 
} 
// switch to next slide 
function nextslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 

    }else{ 
     $('.oldactive').next().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
}); 
// 
function prevslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 

    }else{ 
     $('oldactive').prev().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 


});

источник

2016-08-14 Aditya Mehta

Что такое '$ ('активный') шоу() «должен делать? Вы хотите выбрать элементы с классом 'active'? Затем вам не хватает точки в вашем селекторе ... – Steve

Вы также используете эту версию без кавычек: '$ (активная)' – Steve

да я сделал это в 8-й строке –

Попробуйте заменить

<script type="text/javascript" src = "jquery.js"></script>

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

источник

2016-08-14 21:40:19

я попробую это –

нет все тот же, и я также попытался обменять оба тега сценария –

Я рекомендую использовать хромовые разработчикам инструменты:
1. Нажмите F12
2. После того, как разработчики инструментов открыт в ключе хром нажмите ESC, чтобы открыть консоль

После того, как вы там, вы увидите ошибку, которая представляет собой дополнительный тег в строке 50 кода, в журнал консоли ошибка будет отображаться как это:

Uncaught SyntaxError: Unexpected token }   script.js:50

в ваши функции в JS вам нужно передать активной переменной

function nextslide(active){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 
    }else{ 
    $('.oldactive').next().addclass('active'); 
    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
function prevslide(active){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 
    }else{ 
     $('oldactive').prev().addclass('active'); 
    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
});

источник

2016-08-14 21:44:20

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

$('#next').on('click',nextslide); 
$('#prev').on('click',prevslide); 
//autoslider handler 
if(autoswitch == true);{ 
    setinterval(nextslide.autoswitch_speed); 
} 
// switch to next slide 
function nextslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('last-child')){ 
     $('.slide').first().addclass('active'); 

    }else{ 
     $('.oldactive').next().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
} 
}); 
// 
function prevslide(){ 
    $(active).removeclass('active').addclass('oldactive'); 
    if($('.oldactive').is('first-child')){ 
     $('.slide').last().addclass('active'); 

    }else{ 
     $('oldactive').prev().addclass('active'); 

    } 
    $('.oldactive').removeclass('oldactive'); 
    $('.slide').fadeout(speed); 
    $('.active').fadein(speed); 
}

источник

2016-08-14 21:49:36

я уже исправил эту проблему, но не работал ... все еще –

Попробуйте это:

HTML:

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <title> 
     content slider 
    </title> 
    <link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div id="container"> 
     <header> 
      <h1>JQUERY CONTENT SLIDER</h1> 
     </header> 
     <img src="img/left.png" id="prev" alt="prev"> 
     <div id="slider"> 
      <div class="slide"> 
       <div class="slide-copy"> 
        <h2>slider 1</h2> 
        <p background="black">this is slide one</p> 
       </div> 
       <img src="img/slider.png"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 2</h2> 
        <p background="black">this is slide one</p> 
       </div> 
       <img src="img/slider1.jpg"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 3</h2> 
        <p background="black">this is slide three</p> 
       </div> 
       <img src="img/slider2.jpg"> 

      </div> 
      <div class="slide "> 
       <div class="slide copy"> 
        <h2>slider 4</h2> 
        <p background="black">this is slide four</p> 
       </div> 
       <img src="img/slider3.jpg"> 

      </div> 
      <div class="slide"> 
       <div class="slide copy"> 
        <h2>slider 5</h2> 
        <p background="black">this is slide five</p> 
       </div> 
       <img src="img/2722526.png"> 

      </div> 
     </div> 
     <img src="img/slide-image.png" id="next" alt="next"> 
    </div> 

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="js/script.js"></script> 
</body> 


</html>

JS:.

$(document).ready(function() { 
    var speed = 500; //fade spped 
    var autoswitch = false; //auto slider options 
    var autoswitch_speed = 4000; //auto slider speed 

    //add initial active class 
    $('.slide').first().addClass('active'); 
    //hide all slides 
    $('.slide').hide(); 
    //shpw first slide 
    $('.active').show(); 

    $('#next').off('click').on('click', nextslide); 
    $('#prev').off('click').on('click', prevslide); 
    //autoslider handler 
    if (autoswitch == true); { 
    setInterval(nextslide, autoswitch_speed); 
    } 
    // switch to next slide 
    function nextslide() { 
    $(".active").removeClass('active').addClass('oldactive'); 
    if ($('.oldactive').is('last-child')) { 
     $('.slide').first().addClass('active'); 

    } else { 
     $('.oldactive').next().addClass('active'); 

    } 
    $('.oldactive').removeClass('oldactive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
    } 

    // 
    function prevslide() { 
    $(".active").removeClass('active').addClass('oldactive'); 
    if ($('.oldactive').is('first-child')) { 
     $('.slide').last().addClass('active'); 

    } else { 
     $('.oldactive').prev().addClass('active'); 

    } 
    $('.oldactive').removeClass('oldactive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
    } 

});

источник

2016-08-14 21:52:24 nseepana

он решил ошибку, не сделано –

Код _js/script.js_ имеет так много синтаксических ошибок, вам нужно быть очень осторожным l с ** camelCase **. – nseepana

javascript не связывается с html-файлом

ответ

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