【问题标题】:jQuery Unslider working locally, but not on serverjQuery Unslider 在本地工作,但不在服务器上
【发布时间】:2014-06-22 00:01:30
【问题描述】:

尝试在网站上实现 jQuery Unslider 时遇到一个奇怪的问题。我在本地让一切都像魅力一样工作,但是当我将它上传到我的主机(在本例中为 One.com)时,一切都崩溃了。幻灯片中的图像现在显示在彼此下方。

我一直在寻找代码的问题,现在我的眼睛都向内转了。所以,如果可以的话,请帮助我=)

测试站点链接:http://villabalder.se/VBv2/index.html

脚本:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/unslider.js"></script>

jQuery:

    $(function() {
    $('.vbslides').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 3000,              //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: false              //  Support responsive design. May break non-responsive designs
        });
    });

HTML:

<div class="vbslides">
<ul>
    <li><img src="img/villabalder_ext1.jpg"></li>
    <li><img src="img/villabalder_ext2.jpg"></li>
    <li><img src="img/villabalder_int1.jpg"></li>
    <li><img src="img/villabalder_int2.jpg"></li>
</ul>
</div>

CSS:

    .vbslides { 
    position: relative; 
    overflow: no; 
}

.vbslides ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.vbslides ul li {  
    display: block;
    float: left;
    margin: 0;
    padding: 0;
}

    .vbslides .dot {
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.vbslides .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}

    .vbslides .dots li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 4px;

        text-indent: -999em;

        border: 2px solid #fff;
        border-radius: 6px;

        cursor: pointer;
        opacity: .4;

        -webkit-transition: background .5s, opacity .5s;
        -moz-transition: background .5s, opacity .5s;
        transition: background .5s, opacity .5s;
    }

        .vbslides .dots li.active {
            background: #fff;
            opacity: 1;
        }

【问题讨论】:

  • 您在控制台中有一些错误 .. 特别是找不到:"NetworkError: 404 Not Found - http://villabalder.se/VBv2/js/jquery.backstretch.min.js""NetworkError: 404 Not Found - http://villabalder.se/VBv2/js/modernizr.custom.36240.js" 我假设这会破坏您的 jQuery .. 在旁注中,控制台是一个工具会大大增加您的故障排除时间..值得花时间学习正确使用..

标签: jquery html css


【解决方案1】:

所以你在你的 head 元素中调用了以下内容:

<!-- Övriga jQuery filer -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/unslider.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-sv.js"></script>

然后在你身体的末端,你会调用这些:

<!-- Hämtar Google CDN jQuery, med lokal back-up -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>

<!-- jQuery -->
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="js/jquery.ui.datepicker-sv.js"></script>

这会覆盖 $ 变量,并且不再定义您的 unslider 插件。

要明确一点:您应该只加载一个核心 jQuery 库,并且它应该(通常)是您在页面上加载的第一个脚本文件。

【讨论】:

    【解决方案2】:

    尝试使用在线文件解决问题:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
        <script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
    

    确保 JavaScript 看起来像这样:

    <script type="text/javascript">
    
    $(function() {
    $('.banner').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 3000,              //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: false              //  Support responsive design. May break non-responsive designs
    
    });
    var unslider = $('.banner').unslider();
    
      $('.prev').click(function() {
          unslider.data('unslider').prev();
      });
    
      $('.next').click(function() {
          unslider.data('unslider').next();
      });
      return false;
    });
    </script>
    

    如果您仍然有问题,请将此示例复制/粘贴到 .html 文件中

        <!-- The HTML -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    
        <head>
        <title>Unslider.com arrow example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
        <script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
    
            <!-- JavaScript -->
    
        <script type="text/javascript">
    
    $(function() {
    $('.banner').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 3000,              //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: false              //  Support responsive design. May break non-responsive designs
    
    });
    var unslider = $('.banner').unslider();
    
      $('.prev').click(function() {
          unslider.data('unslider').prev();
      });
    
      $('.next').click(function() {
          unslider.data('unslider').next();
      });
      return false;
    });
    </script>
    
        <!-- CSS -->
        <style type="text/css">
    
    * { 
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box; 
    }
    
    .banner {
    position: relative;
    width: 100%;
    overflow: auto;
    top: 50px;
    /*z-index: -1;*/
    
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    
    color: #FFFFFF;
    text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
    
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    }
    .banner ul {
    list-style: none;
    width: 300%;
    }
    .banner ul li {
    display: block;
    float: left;
    
    min-height: 500px;
    
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
    }
    
    .banner .inner {
    padding: 360px 0 110px;
    
    float: left;
    vertical-align:-100px;
    }
    
    .banner h1, .banner h2 {
    
    font-size: 40px;
    line-height: 52px;
    color: #fff;
    }
    
    .banner .btn {
    display: inline-block;
    margin: 25px 0 0;
    padding: 9px 22px 7px;
    clear: both;
    
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border : rgba(255, 255, 255, 0.4) solid 2px;
    border-radius: 5px;
    }
    .banner .btn:hover {
    background : rgba(255, 255, 255, 0.05);
    }
    .banner .btn:active {
    -webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
    -moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
    -ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
    -o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
    filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
    }
    
    .banner .btn, .banner .dot {
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    }
    
    .banner .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    width: 100%;
    }
    .banner .dots li {
    display: inline-block;
    
    width: 10px;
    height: 10px;
    line-height: 10px;
    margin: 0 4px;
    
    text-indent: -999em;
    
    
    border: 2px solid #fff;
    border-radius: 6px;
    
    cursor: pointer;
    opacity: .4;
    
    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
    }
    .banner .dots li.active {
    background: #fff;
    opacity: 1;
    }
    
    
    
    
    .unslider-arrow {
      font-family: Expressway;
      font-size: 50px;
      text-decoration: none;
      color: #3d3d3d;
      background: rgba(255,255,255,0.7);
      padding: 0 20px 5px 20px;
    }
    
    .next {
      position: absolute;
      top: 65%;
      right: 0  
    }
    
    .prev {
      position: absolute;
      top: 65%;
      right: 90 /* change to left:0; if u wanna have arrow on left side */ 
    }
    </style>
         </head>
        <!-- Body of HTML document -->
    
        <body>
            <div class="slider">
            <div class="banner">
              <ul>
                <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li> 
                <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
                <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
                <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
             </ul>
            </div>
              <a href="#" class="unslider-arrow prev">&larr;</a>
              <a href="#" class="unslider-arrow next">&rarr;</a>
            </div>
       </body>  
    
    </html> 
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-09-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-06-19
      • 1970-01-01
      相关资源
      最近更新 更多