如何在JS滑块中添加自动播放功能

编程问答 2022-08-11

问题描述

我正在使用Codepen中的Gumpy Slider。这是链接https://codepen.io/Lewitje/pen/yNKNmV 现在我只想添加自动播放功能。那么如何通过主动分页使其自动播放？

$(document).ready(function(){
var slide = $(".slide");
var viewWidth = $(window).width();
var sliderInner = $(".slider-inner");
var childrenNo = sliderInner.children().length;

sliderInner.width( viewWidth * childrenNo );

$(window).resize(function(){
    viewWidth = $(window).width();
});

function setWidth(){
    slide.each(function(){
        $(this).width(viewWidth);
        $(this).css("left",viewWidth * $(this).index());
    }); 
}

function setActive(element){
    var clickedindex = element.index();
    
    $(".slider-nav .active").removeClass("active");
    element.addClass("active");
    
    sliderInner.css("transform","translateX(-" + clickedindex * viewWidth + "px) translateZ(0)");
    
    $(".slider-inner .active").removeClass("active");
    $(".slider-inner .slide").eq(clickedindex).addClass("active");
}

setWidth();

$(".slider-nav > div").on("click",function(){
    setActive($(this));
});

$(window).resize(function(){
    setWidth();
});

setTimeout(function(){
    $(".slider").fadeIn(500);
},2000); });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjquerysliderslideshow