Javascript 使3D立方体图像继续在同一侧过渡

我使用本教程创建了一个以幻灯片形式移动的图像立方体。

看看你在干什么

我已经设法使用setInterval自动移动了它。当立方体到达第四个图像时。它移回到了第一个

jQuery文件

     <script>
        /** Code By Webdevtrick ( https://webdevtrick.com ) **/
        var $carousel = $('.carousel'),currentSlide, nextSlide;
        setInterval( function () 
        {
            currentSlide = $carousel.attr('data-slide');
            nextSlide = +currentSlide === 4 ? 1 : +currentSlide + 1;
            $carousel.attr('data-slide', nextSlide);
        }
        , 2000);
    </script>

/**由Webdevtrick编写的代码（https://webdevtrick.com ) **/
变量$carousel=$（'.carousel'），当前幻灯片，下一幻灯片；
setInterval（函数（）
{
currentSlide=$carousel.attr（'data-slide'）；
nextSlide=+currentSlide==4？1:+currentSlide+1；
$carousel.attr（'data-slide'，nextSlide）；
}
, 2000);

---

我希望多维数据集继续向左滑动，同时也在自身移动。

通过添加一些

CSS

并在

JS

中修改，您可以循环此多维数据集滑块。但它通过更改

数据幻灯片

值并应用

CSS

旋转立方体来设置动画。它不是动态滑块

这里是工作演示

$（文档）.ready（函数（）{
变量$carousel=$（'.carousel'），
当前幻灯片，下一个幻灯片；
$（'.next'）。单击（函数（）{
if（！$carousel.hasClass（'slided'））{
currentSlide=$carousel.attr（'data-slide'）；
nextSlide=+currentSlide==5？0:+currentSlide+1；
$carousel.attr（'data-slide'，nextSlide）；
$carousel.addClass（“滑动”）；
}
$carousel.on（'transitionend'，function（）{
如果（nextSlide==5）{
$carousel.css（'transition'，'none'）；
$carousel.attr（'data-slide'，1）；
setTimeout（函数（）{
$carousel.removeAttr（'style'）；
},10);
}
$carousel.removeClass（‘滑动’）；
});
});
$（'.prev'）。单击（函数（）{
if（！$carousel.hasClass（'slided'））{
currentSlide=$carousel.attr（'data-slide'）；
nextSlide=+currentSlide==0？5:+currentSlide-1；
$carousel.attr（'data-slide'，nextSlide）；
$carousel.addClass（“滑动”）；
}
$carousel.on（'transitionend'，function（）{
如果（nextSlide==0）{
$carousel.css（'transition'，'none'）；
$carousel.attr（'data-slide'，4）；
setTimeout（函数（）{
$carousel.removeAttr（'style'）；
},10);
}
$carousel.removeClass（‘滑动’）；
});
});
});
/**由Webdevtrick编写的代码（https://webdevtrick.com ) **/
*，*：之前，*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
html，正文{
宽度：100%；
身高：100%；
}
身体{
利润上限：200px；
背景：#333；
字体系列：“statliches”，草书；
字号：2em；
线高：1.5；
}
.集装箱{
宽度：90%；
最大宽度：1200px；
保证金：0自动；
垫底：5em；
透视：100em；
}
旋转木马{
位置：相对位置；
宽度：15em；
高度：15公分；
保证金：0自动；
变换样式：保留-3d；
转型：转型0.5s轻松；
}
.carousel[数据幻灯片=“0”]{
变换：旋转（90度）；
}
.carousel[数据幻灯片=“1”]{
变换：旋转（0度）；
}
.carousel[数据幻灯片=“2”]{
变换：旋转（-90度）；
}
.carousel[数据幻灯片=“3”]{
变换：旋转（-180度）；
}
.carousel[数据幻灯片=“4”]{
变换：旋转（-270度）；
}
.carousel[数据幻灯片=“5”]{
变换：旋转（-360度）；
}
.幻灯片{
位置：绝对位置；
宽度：15em；
高度：15公分；
背景：白色；
}
.幻灯片img{
宽度：100%；
}
.back、.slides:第n个子项（3）{
变换：translateZ（-7.5em）旋转（180度）；
}
.右，.幻灯片：第n个子项（2）{
变换：旋转（-270度）translateX（7.5em）；
变换原点：右上角；
}
.左，.幻灯片：第n个子项（4）{
变换：旋转（270度）translateX（-7.5em）；
变换原点：左中；
}
.前，.幻灯片：第n个子项（1）{
变换：translateZ（7.5em）；
}
.next，.prev{
位置：绝对位置；
最高：50%；
右：0；
宽度：6em；
边缘顶部：-2.5em；
边界半径：3px；
背景:#212121 ;；
文本对齐：居中；
线高：3；
字母间距：5px；
颜色：白色；
转化：translateY（-50%）；
光标：指针；
}
.prev:悬停{
背景：#e60023；
}
上一篇{
左：0；
}
.下一步：悬停{
背景：#e60023；
}
.cf:before、.slides:before、，
.cf：之后，
.幻灯片：之后{
内容：“；
显示：表格；
}
.cf:after、.slides:after{
明确：两者皆有；
}
.cf、.slides{
*缩放：1；
}

下一个⇨；
⇦ 上
我可以帮助您，但首先要清除这些文字“我希望立方体继续向左滑动。因为它正在自行移动”。是否要循环立方体滑块？是的，我希望它在图像上循环@Ibnelaiqit如果代码正确，它似乎通过向左滑动来移动所有图像，但当它到达第四个图像时，它会通过向右移动返回到第一个图像。我不想包括下一个后退按钮。您的第一个答案似乎正确。您可以通过添加
CSS
display:none来隐藏按钮谢谢你，你给了我一个修复代码的想法，现在可以了。但我不明白为什么要添加（滑动类）？停止单击按钮
e.preventDefault（）
和
e.stopPropagation（）
不起作用。所以，我使用
.slideing
类绑定了幻灯片条件，直到动画尚未完成。