Javascript 卡鲁弗雷泽尔在淡入时中断
我使用carouFredSel插件构建了一个图像滑块,所有的东西都可以通过一个图像旋转木马正常工作,但是随着我继续构建我的站点,我遇到了一些问题 第一个可见的旋转木马工作正常,但是如果您单击右上角的IMG链接以查看第二个旋转木马,它将忽略告诉它一次只显示一个项目或类似内容的代码位 我已经确保在这两个版本中所有的设置都是一样的,并且我尝试过在没有运气的情况下进行显示和浮动更改的实验 我现在也意识到这似乎是由淡入过渡引起的,因为当我将淡入设置为淡入时,同样的事情也会发生在第一个滑块上 猜测它与jQuery脚本所做的显示更改有关 有什么想法吗Javascript 卡鲁弗雷泽尔在淡入时中断,javascript,jquery,slideshow,carousel,caroufredsel,Javascript,Jquery,Slideshow,Carousel,Caroufredsel,我使用carouFredSel插件构建了一个图像滑块,所有的东西都可以通过一个图像旋转木马正常工作,但是随着我继续构建我的站点,我遇到了一些问题 第一个可见的旋转木马工作正常,但是如果您单击右上角的IMG链接以查看第二个旋转木马,它将忽略告诉它一次只显示一个项目或类似内容的代码位 我已经确保在这两个版本中所有的设置都是一样的,并且我尝试过在没有运气的情况下进行显示和浮动更改的实验 我现在也意识到这似乎是由淡入过渡引起的,因为当我将淡入设置为淡入时,同样的事情也会发生在第一个滑块上 猜测它与jQu
$("#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...
$("#carousel-div").animate({
opacity: 'toggle',
width: 'toggle',
}, 1200, function() {
do_carousel();
});
然后在显示div的代码中,它调用该函数:
var do_carousel = function() {
$('#carousel').carouFredSel({
responsive: true,
circular: false,
etc...
$("#carousel-div").animate({
opacity: 'toggle',
width: 'toggle',
}, 1200, function() {
do_carousel();
});
一旦我把转盘初始化移到那里,它就开始工作了。我希望这可能会帮助你找到问题的根源