0

使用 Unslider 插件在网站上做幻灯片，我得到了幻灯片等等。但是当我添加速度、点、延迟、完成等选项时，它就不起作用了。幻灯片正在滚动，但我在 JS 中所做的任何更改都不会做任何事情。

<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script>

$(function() {
    $('.banner').unslider({
    speed: 500,               
    delay: 3000,              
    complete: function() {},  
    keys: true,               
    dots: true,               
    fluid: false              
    });
});
</script>
</head>
<body background="background.jpg">
<div id="innhold"> 
        <div class="banner">
        <ul>
            <li><img src="mallorca.png" alt="mallorca"></li>
            <li><img src="rhodos.png" alt="rhodos"></li>
            <li><img src="portimao.png" alt="portimao"></li>
        </ul>
        </div>
</div>

这是我的 CSS

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
4

1 回答 1

1

选项有效！只是您没有正确的 CSS 来查看选项是否有效。我在这里为您模拟了它：http: //jsfiddle.net/3zt5k/并为您可以玩弄的点（数字）添加了一些 css。

    .dots li {
  position: relative;
    bottom: 50px;
    left: 215px;
    display: inline;
    margin: 5px;
 }
.dots .active {
    color:#fff
}
  • 您可以更改速度和延迟时间。（5000 = 5 秒）当你
  • 使用它通过照片更改的键盘上的箭头键。
  • 现在显示点，当前图像的数字为白色。
  • 不确定流体功能的作用！但我假设你这样做，对不起。

此外，您的http://unslider.com/unslider.min.js文件位于 jsfiddle 左侧的外部资源中！

您的解决方案一直对您隐藏:)

于 2013-11-06T15:09:12.363 回答