我使用 carouFredSel 插件构建了一个图像滑块,并且在单个图像轮播中一切正常,但当我继续构建我的网站时,我遇到了一些问题。
第一个可见的轮播效果很好,但如果您单击右上角的 IMG 链接查看第二个轮播,它会忽略告诉它一次仅显示一个项目或类似内容的代码。
我已确保两者的所有设置都相同,并且我尝试尝试显示和浮动更改,但没有成功
我现在也意识到这似乎是由淡入淡出过渡引起的,因为当我设置淡入时,第一个滑块上也会发生同样的事情。
猜测这与 jQuery 脚本所做的显示更改有关
$("#web-carousel").carouFredSel({
width: "100%",
height: 450,
direction: "right",
circular: true,
infinite: true,
items: {
visible: 1,
width: "variable",
height: 400,
width: 720
},
scroll: {
duration: 1000,
pauseOnHover: true
},
auto: {
timeoutDuration: 9999,
delay: 5000
},
prev: {
button: "#web-left",
key: "left"
},
next: {
button: "#web-right",
key: "right"
},
pagination: {
container: "#web-pagination",
keys: true
},
swipe: true,
mousewheel: false
});
我不确定这是否是给您带来麻烦的原因,但这听起来可能与我遇到的问题相同。我的轮播位于一个隐藏的 div 中,由点击触发的 animate() 显示。直到我将轮播初始化放入动画后函数中时,它才正确渲染 - 确保在 div 准备好之前轮播不会初始化似乎是关键,可能是因为轮播代码查看事物的大小当它准备图像时。所以我所做的就是将轮播初始化包装在一个函数中:
var do_carousel = function() {
$('#carousel').carouFredSel({
responsive: true,
circular: false,
etc...
然后在显示 div 的代码中,它调用该函数:
$("#carousel-div").animate({
opacity: 'toggle',
width: 'toggle',
}, 1200, function() {
do_carousel();
});
一旦我将轮播初始化移到那里,它就开始工作了。我希望这也许能帮助您找到问题的根源。