0

我正在尝试让一个名为 wmu 滑块的 jquery 滑块工作。我已经从https://github.com/pastawoua/wmuSlider下载了文件和演示，当我在本地打开 demo.html 时，一切正常，但是当我将它上传到我的网站时，没有任何负载，这里是网址http://www.klossal.com/wmuSlider/demo/demo.html

我已经多次查看所有内容，网址都是正确的，我已经尝试修复这个问题几个小时了，但没有运气，任何帮助将不胜感激。

对不起，如果链接不适合你，这里是代码：

HTML：

<!DOCTYPE html>

<!-- BEGIN html -->
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->

<!-- BEGIN head-->
<head>

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

<!-- Title -->
<title>wmuSlider Demo</title>

<!-- Stylesheets -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<script type="text/javascript" src="modernizr.custom.min.js"></script>    
<script src="http://www.klossal.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.wmuSlider.js"></script>
<script src="../jquery.wmuGallery.js"></script>
<script>
    $('.example1').wmuSlider(); 

    $('.example2').wmuSlider({
        touch: true,
        animation: 'slide'
    });   

    $('.example3').wmuSlider({
        touch: Modernizr.touch,
        animation: 'slide',
        items: 2
    });

    $('.example4').wmuGallery();
</script>
<!-- END head -->
</head>

<!-- BEGIN body -->
<body>

<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example1">

    <div class="wmuSliderWrapper">
        <article>
            <img src="http://www.klossal.com/media/boundarywaters/boundry-1.jpg" />
        </article>

        <article>
            <img src="http://www.klossal.com/media/boundarywaters/boundry-2.jpg" />
        </article>

        <article>
            <img src="http://www.klossal.com/media/boundarywaters/boundry-3.jpg" />
        </article>

        <article>
            <img src="http://www.klossal.com/media/boundarywaters/boundry-4.jpg" />
        </article>

        <article>
            <img src="http://www.klossal.com/media/boundarywaters/boundry-5.jpg" />
        </article>

        <article>
            <img src="http://www.klossal.com/media/boundarywaters/boundry-6.jpg" />
        </article>
    </div>

<!-- END .wmuSlider -->
</div>

<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example2">

    <div class="wmuSliderWrapper">
        <article>
            <img src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
        </article>            
    </div>

<!-- END .wmuSlider -->
</div>

<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example3">

    <div class="wmuSliderWrapper">
        <article>
            <img src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
        </article>

        <article>
            <img src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
        </article>
    </div>

<!-- END .wmuSlider -->
</div>

<!-- BEGIN .wmuGallery -->
<div class="wmuGallery example4">

    <div class="wmuSlider">        
        <div class="wmuSliderWrapper">
            <article>
                <img width="75" height="75" 
src="http://farm7.static.flickr.com/6052/6279000273_218313c876_s.jpg" data-src-
full="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
            </article>

            <article>
                <img width="75" height="75" 
src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb_s.jpg" data-src-
full="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
            </article>

            <article>
                <img width="75" height="75" 
src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f_s.jpg" data-src-
full="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
            </article>

            <article>
                <img width="75" height="75" 
src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97_s.jpg" data-src-
full="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
            </article>

            <article>
                <img width="75" height="75"    
src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890_s.jpg" data-src-
full="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
            </article>

            <article>
                <img width="75" height="75" 
src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93_s.jpg" data-src-
full="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
            </article>
        </div>
    </div>  

<!-- END .wmuGallery -->
</div>

<!-- Scripts -->
<script type="text/javascript" src="modernizr.custom.min.js"></script>    
<script src="http://www.klossal.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.wmuSlider.js"></script>
<script src="../jquery.wmuGallery.js"></script>
<script>
    $('.example1').wmuSlider(); 

    $('.example2').wmuSlider({
        touch: true,
        animation: 'slide'
    });   

    $('.example3').wmuSlider({
        touch: Modernizr.touch,
        animation: 'slide',
        items: 2
    });

    $('.example4').wmuGallery();
</script>

<!-- END body -->
</body>
<!-- END html -->
</html>

有多个JS文件，所以我将链接到它们的github：

https://github.com/pastawoua/wmuSlider/blob/master/jquery.wmuGallery.js

https://github.com/pastawoua/wmuSlider/blob/master/jquery.wmuslider.js

https://github.com/pastawoua/wmuSlider/blob/master/demo/modernizr.custom.min.js

这是CSS：

https://github.com/pastawoua/wmuSlider/blob/master/demo/css/demo.css

4

2 回答 2

4

如果这还没有解决（或对于未来的搜索者），请检查从 github 下载的每个文件。当您右键单击并Save Link As时，看起来每个文件（包括sprites.png文件）都是文件的副本。demo.html

而是查看演示文件并复制/粘贴。

于 2012-11-13T18:05:41.640 回答
1

大写锁定很重要！更改 <script src="../jquery.wmuSlider.js"></script> 为 

<script src="../jquery.wmuslider.js"></script>

:)

于 2012-11-19T15:16:03.227 回答