Question

我已经在这里工作了几个小时，我仍然无法理解它为什么不能工作。

我跟着http://www.serie3.info/s3slider/的演示，我唯一的改变就是取代＆＃34; s3slider＆＃34;到＆＃34;滑块＆＃34; （我已经对css文件做了同样的事情。）

我在标题中包含了jquery和s3slider.js库：

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

我的滑块就像任何其他基本布局一样：

<div id="slider">
    <ul id="sliderContent">
        <li class="sliderImage">
            <img src="img/portfolio-1.jpg">
            <span>Your text comes here</span>
        </li>
        <li class="sliderImage">
            <img src="img/portfolio-2.jpg">
            <span>Your text comes here</span>
        </li>
        <div class="clear sliderImage"></div>
    </ul>
</div>

我还在结束体标记＆gt;之前包含了函数调用：

   <script type="text/javascript">
$(document).ready(function() {
    $('#slider').s3Slider({
        timeOut: 4000       //in milliseconds
    });
});
</script>

CSS没有任何问题，我对此非常肯定。

非常感谢任何帮助。

Answer 1

如果你想改变主要的id，你必须用s3sliderContent，s3sliderImage

等所有地方的新id替换s3slider

＆＃13;

$(document).ready(function() { 
    $('#slider').s3Slider({
        timeOut: 4000
    });
});

＆＃13;

#slider {
    width: 400px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}
 
#sliderContent {
    width: 400px; /* important to be same as image width or wider */
    position: absolute; /* important */
    top: 0; /* important */
    margin-left: 0; /* important */
}
 
.sliderImage {
    float: left; /* important */
    position: relative; /* important */
    display: none; /* important */
}
 
.sliderImage span {
    position: absolute; /* important */
    left: 0;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 374px;
    background-color: #000;
    filter: alpha(opacity=70); /* here you can set the opacity of box with text */
    -moz-opacity: 0.7; /* here you can set the opacity of box with text */
    -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
    opacity: 0.7; /* here you can set the opacity of box with text */
    color: #fff;
    display: none; /* important */
    top: 0; /*
        if you put top: 0;  -> the box with text will be shown 
                                at the top of the image
        if you put bottom: 0;  -> the box with text will be shown 
                                at the bottom of the image
    */
}
 
.clear {
    clear: both;
}

＆＃13;

<div id="slider">
    <ul id="sliderContent">
        <li class="sliderImage">
            <img src="http://data.whicdn.com/images/26383513/superthumb.jpg">
            <span>Your text comes here</span>
        </li>
        <li class="sliderImage">
            <img src="http://data.whicdn.com/images/26383513/superthumb.jpg">
            <span>Your text comes here</span>
        </li>
        <div class="clear sliderImage"></div>
    </ul>
</div>

＆＃13;

这是工作演示。 Demo Link

s3slider没有显示

1 个答案: