为什么我的JS滑块没有工作?

时间:2015-04-07 13:00:30

标签: javascript jquery html css

我是HTML / CSS的新手,我最近购买了一个自举主题,并且我尝试使用他们提供的HTML代码段来创建我自己的主页。

我复制/粘贴了一段代码和JS的文件路径,但它根本不起作用。资产(文本,图像,视频)都出现了,但没有一个是样式的,而且它们都是静态的。 CSS和JS都没有在这个细分市场上工作。

这是一个关于它应该如何显示的现场演示:

http://htmlstream.com/preview/unify-v1.7/index.html

这是我目前看起来的样子:

http://i.gyazo.com/7f8caf3b13c10c3dbfd340afd3fcb1db.png

这是滑块的HTML细分:

<!--=== Slider ===-->
    <div class="slider-inner">
        <div id="da-slider" class="da-slider">
            <div class="da-slide">
                <h2><i>CLEAN &amp; FRESH</i> <br /> <i>FULLY RESPONSIVE</i> <br /> <i>DESIGN</i></h2>
                <p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
                <div class="da-img"><img class="img-responsive" src="assets/plugins/parallax-slider/img/1.png" alt=""></div>
            </div>
            <div class="da-slide">
                <h2><i>RESPONSIVE VIDEO</i> <br /> <i>SUPPORT AND</i> <br /> <i>MANY MORE</i></h2>
                <p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i></p>
                <div class="da-img">
                    <iframe src="http://player.vimeo.com/video/47911018" width="530" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
                </div>
            </div>
            <div class="da-slide">
                <h2><i>USING BEST WEB</i> <br /> <i>SOLUTIONS WITH</i> <br /> <i>HTML5/CSS3</i></h2>
                <p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
                <div class="da-img"><img src="assets/plugins/parallax-slider/img/html5andcss3.png" alt="image01" /></div>
            </div>
            <div class="da-arrows">
                <span class="da-arrows-prev"></span>
                <span class="da-arrows-next"></span>        
            </div>
        </div>
    </div><!--/slider-->
    <!--=== End Slider ===-->

这是我的HTML文件的HEAD部分:

<head>
<title>Ideal Improvements South West LTD | Home</title>

<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">

<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin">

<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v3.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">

<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" />

<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">

这是我文件底部的JS部分:

    <!-- JS Global Compulsory -->           
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/modernizr.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/jquery.cslider.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->           
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/owl-carousel.js"></script>
<script type="text/javascript" src="assets/js/plugins/parallax-slider.js"></script>
<script type="text/javascript">
 jQuery(document).ready(function() {
        App.init();
        OwlCarousel.initOwlCarousel();        
        StyleSwitcher.initStyleSwitcher();      
        ParallaxSlider.initParallaxSlider();
    });
</script>
<!--[if lt IE 9]>
    <script src="assets/plugins/respond.js"></script>
    <script src="assets/plugins/html5shiv.js"></script>
    <script src="assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->

我在chrome dev工具控制台中遇到了7个错误。 4是#34; Uncaught syntaxerror:意外令牌非法&#34; 2是&#34;无法加载资源:err_cache_missing和err_file_not_found(缓存一个链接到vimeo视频链接,找不到文件链接到谷歌字体。) 最后一个是&#34;未被捕获的referenceerror:未定义样式切换器&#34;我相信这与我复制一些代码的方式有关,如果你看一下现场演示网站,它的右上角有一个样式切换器。

我拿了一个demo html文件并把它放到我的站点导演中,它使用相同的文件路径访问JS和CSS。

1 个答案:

答案 0 :(得分:0)

hello you seen your code properly i think something wrong 

<script type="text/javascript" src="assets/plugins/parallax-  slider/js/modernizr.js"></script>

Space between js name i think this is problem.

or anything else please share your website link or demo code slider