1

我在将 nivo 滑块添加到我的应用程序的轨道时遇到了很多困难。我不知道我在这里做错了什么。这是我到目前为止所拥有的。本地加载的所有内容都是空白页，没有图像或加载 gif 或任何东西。任何帮助，将不胜感激！谢谢

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
    <title>Racing</title>
    <link rel="stylesheet" href="mynivo.css" type="text/css" media="screen" />
    <%= javascript_include_tag 'application' %>
    <%= javascript_include_tag 'jquery.nivo.slider.pack' %>
    <%= javascript_include_tag 'jquery.nivo.slider' %>
    <%= javascript_include_tag 'jquery-1.9.0.min.js' %>
    <script type="text/javascript" src="/javascripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/javascripts/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
</head>
<body>
    <div id="wrapper">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="<%= asset_path( '1.jpg' ) %>" data-thumb="/app/assets/images/1.jpg" alt="" title="me"/>
                <img src="<%= asset_path( '2.jpg' ) %>" data-thumb="/app/assets/images/2.jpg" alt="" title="hey"/>
                <img src="<%= asset_path( '3.jpg' ) %>" data-thumb="/app/images/3.jpg" alt="" data-transition="slideInLeft" title="wha" />
                <img src="<%= asset_path( '4.jpg' ) %>" data-thumb="/app/images/4.jpg" alt="" title="#htmlcaption" />
            </div>
        </div>

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

和我的 mynivo.css

body {

}

#slider_wrapper {
    height: 246px;
}

#slider {
    position: relative;
    width: 900px;
    height: 398px;
    background: url(images/loading.gif) no-repeat 50% 50%;
}

#slider img {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

#slider a {
    border: 0;
    display: block;
}

/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width:100%;
    height:auto;
    overflow: hidden;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    max-width: none;
}
.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
    background:white; 
    filter:alpha(opacity=0); 
    opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:100%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
4

0 回答 0