javascript没有链接到html文件

时间：2016-08-14 21:33:42

标签： jquery slider

我正在尝试使用jQuery创建一个滑块，但是我很难将我的javascript文件链接到我的html。我检查过语义错误，但似乎找不到任何错误。 css没有问题 - 只有javascript似乎不起作用。

<!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);
}


});

4 个答案:

答案 0 :(得分：2)

我建议使用chrome开发工具：
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);
}
});

答案 1 :(得分：0)

尝试替换

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

带

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

答案 2 :(得分：0)

我检查了你的代码。最后两个括号似乎是额外的。
试试这段代码

$('#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);
}

答案 3 :(得分：0)

试试这个：

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);
  }

});
相关问题
最新问题