我正在寻求解决有关为每张幻灯片设置不同暂停长度的 bxslider 问题。我最初遵循解决方案 here它对于 5 或 6 张幻灯片效果很好，但在杂耍超过 10-15 张之后，旋转器现在就挂起了:
这是我根据上面的示例使用的 slider 代码:
<script>
$(document).ready(function(e) {
var ImagePauses = [15000,15000,15000,15000,15000,15000,15000,10000,10000,10000,10000,10000,10000,5000,5000,5000,5000,5000,5000,5000];
var slider = $('.bxslider').bxSlider();
modifyDelay(0);
function modifyDelay(startSlide){
slider.reloadSlider({
mode: 'horizontal',
//infiniteLoop: true,
auto: true,
autoStart: true,
autoDirection: 'next',
autoHover: true,
pause: ImagePauses[startSlide],
autoControls: false,
pager: true,
pagerType: 'full',
controls: true,
//captions: true,
//speed: 500,
startSlide: startSlide,
onSlideAfter: function($el,oldIndex, newIndex){
modifyDelay(newIndex);
}
});
}
});
</script>
我遗漏了什么明显的东西吗？谢谢。
最佳答案
更新
似乎有更多涉及制作 bxSlider 自定义自动功能。我意识到如果 auto 则不需要 setTimeout()、goToNextSlide() 和 goToSlide() 方法使用选项。
我制作了 3 个对象文字，每个代表一个 bxSlider 选项。当下一组间隔出现时，switch() 将使用下一组 bxSlider 选项调用 reloadSlider() 方法。
旧
我们可以通过回调onSlideAfter来控制幻灯片间隔的延迟，回调函数bxDelay()使用setTimeout并且方法goToNextSlide()。详细信息已在源代码中注释。
片段
.as-console.as-console * {
background: orange;
color: black;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bxArraySourcePauseInterval</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<style>
img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<ul class="bx">
<li>
<img src="http://placehold.it/350x150/000/fff?text=1">
</li>
<li>
<img src="http://placehold.it/350x150/00f/fc0?text=2">
</li>
<li>
<img src="http://placehold.it/350x150/0e0/000?text=3">
</li>
<li>
<img src="http://placehold.it/350x150/f00/fff?text=4">
</li>
<li>
<img src="http://placehold.it/350x150/fff/000?text=5">
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
$(function() {
var count = 0;
var cfg0 = {
auto: true,
pause: 3000,
autoStart: true,
autoHover: true,
onSlideAfter: bxDelay
}
var cfg1 = {
auto: true,
pause: 2000,
autoStart: true,
autoHover: true,
onSlideAfter: bxDelay
}
var cfg2 = {
auto: true,
pause: 1000,
autoStart: true,
autoHover: true,
onSlideAfter: bxDelay
}
var bx = $('.bx').bxSlider(cfg0);
function bxDelay($obj, from, to) {
count++;
switch (count) {
case 8:
bx.reloadSlider(cfg1);
break;
case 15:
bx.reloadSlider(cfg2);
break;
case 22:
bx.reloadSlider(cfg0);
count = 0;
break;
default:
break;
}
console.log('Count: ' + count);
}
});
</script>
</body>
</html>关于javascript - bxslider设置不同侧停顿长度卡在页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40897482/