Question

所以我正在创建一个带div的Jquery幻灯片（只使用文本）。

我有一个小提琴来说明：http://jsfiddle.net/g13y67ef/

我遇到的问题是我希望能够以更容易理解的方式做到这一点。

这是我到目前为止所做的：

    $('#slide_1').click(function () {
    $('#slide_1').fadeOut("slow", function () {
        $('#slide_2').fadeIn("slow", function () {
            $('#slide_2').click(function () {           
                $('#slide_2').fadeOut("slow", function () {
                    $('#sldie_3').fadeIn("slow", function () {
                    });
                });
            });
        });
    });
});

除了这个无限期的嵌套之外我还能做些什么（比方说我想添加10张幻灯片）？

Answer 1

以下是您的任务的通用功能，您可以根据需要添加任意数量的幻灯片，前提是它们遵循id中的相同模式：

$('div[id*="slide"]').click(function () {//any div that contains `slide` in its id
    var index = $(this).index();//get the index of the current item
    var size = $('div[id*="slide"]').length;//get the total number of divs in the html to traverse
    $(this).hide();//hide current item        
    index++;//move to the next item        
    if(index < size)//if not the last item
    {
        $('div[id*="slide"]').eq(index).fadeIn('slow');//show the next item

    }else{
        $('div[id*="slide"]').eq(0).fadeIn('slow');//go to the first item           
    }              
});

DEMO：https://jsfiddle.net/erkaner/g13y67ef/2/

Jquery动态div幻灯片

1 个答案: