Question

我一直在尝试调整以下代码以与CSS3滑块集成（使用关键帧进行动画制作和定时），但是当在同一元素上使用css3动画时，您无法在js中使用.animate要么必须使用其中一个。

当前的js工作的意义是它在幻灯片中导航我唯一的问题是它没有滑动＆＃39;它跳到每张幻灯片。

我真的想保持幻灯片的原样，只想更新我的js，以便幻灯片转换工作。我对js不太好，所以我发现很难找到解决方案。如果有人能为我的问题提出一些建议或解决方案，那将非常感激。

JS

//grab the width and calculate left value
var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);

//if user clicked on prev button
$('#previous').click(function () {
//get the right position            
var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;

    //slide the item
    $("#carousel .video-list").animate({'left' : left_indent}, function () {

    //move the last item and put it as first item                
    $("#carousel .video-list li:first").before($("#carousel .video-list li:last"));

    //set the default item to correct position
    $("#carousel .video-list").css({'left' : left_value});

    });    
//cancel the link behavior            
return false;
});

//if user clicked on next button
$('#next').click(function () {

    //get the right position
    var left_indent = parseInt($("#carousel .video-list").css('left')) - item_width;

    //slide the item
    $("#carousel .video-list").animate({'left' : left_indent}, function () {

    //move the first item and put it as last item
    $("#carousel .video-list li:last").after($("#carousel .video-list li:first"));

    //set the default item to correct position
    $("#carousel .video-list").css({'left' : left_value});
    });    
//cancel the link behavior
return false;

});

Answer 1

我不明白为什么.animate是必需的，因为我已经使用了

transition: left 1s ease;

在我的CSS中实现相同的功能，动画比我使用jQuery更流畅。我试着删除：

//slide the item
$("#carousel .video-list").animate(...

左右。我还在html div中添加了一些文本，以便您可以看到它如何更好地移动。对不起，我无法让它工作，但我真的觉得“过渡”是你需要研究的。这是fiddle：）

...

我认为您最简单的解决方案是放弃整个CSS 动画，并构建自己的轮播：考虑一下电影胶片，这是一堆排列在一起的照片。现在考虑一张带有盒子切口的纸张，一张图片的大小。我们将条带放在纸张后面，只看到一张图像。如果我们移动条带，我们可以更改我们看到的图像。

电影胶片将是 div ，带有 {display：inline-block; 属性，包含每个视频。框剪切为 div ，带有 {overflow：hidden} 属性。要移动条带，我们只需在我们的javascript中使用 $（'＃strip'）。css（{'left'：positionofstripleft - widthofbox}）。对于动画，一个简单的 setInterval（Nextfunction，65000）来执行点击下一步的操作，每隔65秒就可以完成。

最后，CSS 过渡将使动作实际上变为动画。

CSS3图像滑块，javascript导航幻灯片无法正常工作？

1 个答案: