Question

如何让幻灯片显示在第一个类别上暂停？谢谢！

$(document).ready(function(){      

            var images = [
            { 
                 id:0,
                 images: ['media/image0.jpg'],
                    dom: null
             },
                { 
                    id:1,
                images: ['media/image1.jpg'],
                    dom: null

                },
                { 
                    id:2,
                 images: ['media/image2.jpg'],
                    dom: null

                },
                { 
                    id:3,
                     images: ['media/image3.jpg'],
                    dom: null

                },
                { 
                    id:4,
                                    images: ['media/image4.jpg'],
                    dom: null
                },
                { 
                    id:5,
                                       images: ['media/image5.jpg'],
                    dom: null
                },
                { 
                    id:6,
                                        images: ['media/image6.jpg'],
                    dom: null
                }
            ];

            function preloadImages(images, func) {        
                var i = 0;
                var cache = [];
                var loaded = 0;
                var num = images.length;

                for ( ; i < num; i++ ) (function(i) {

                    var new_image = $('<img/>').attr('src', images[i]).load(function(){
                        loaded++;

                        if(loaded == num)
                        {                                                
                            func();                   
                        }
                    });                     
                    cache.push(new_image);
                })(i);

                return true;
            };

            for (var i=0; i < images.length; i++) {   
                preloadImages(images[i].images, function () {});
            }


            var category = 0; // the current tab group to display
            var index = 0; // the current image in the tab group to display
            var slider = $("#slider-container");
            var timer = null;
            var speed = 1000;

            initCategories = function() {
                for (var i = 0; i < images.length; ++i) {
                    images[i].dom = $("<ul/>").addClass("holder");
                    for (var j = 0; j < images[i].images.length; ++j) {
                        images[i].dom.append($("<li/>").addClass("slide").css("background", "url(" + images[i].images[j] + ") no-repeat"));
                    }
                }
            }

            switchCategory = function(newCategory) {
                //if (newCategory != category) {
                    category = newCategory;
                    $(".slideCat").removeClass("active");
                    $(".slideCat[rel='" + category + "']").addClass("active");
                    slider.empty().append(images[category].dom);
                //}
                index = 0;
                $(".holder", slider).css("margin-left", 0);
            }

            switchSlide = function(newSlide, animate) {
                //if (newSlide != index) {
                    index = newSlide;
                    var newMargin = $(".slide:first", slider).width() * -index;
                    if (animate) {
                        $(".holder", slider).animate({"margin-left": newMargin + "px"}, speed, null, null);
                    } else {
                        $(".holder", slider).css("margin-left", newMargin + "px");
                    }
                //}
            }

            doTransition = function() {
                ++index;
                if (index >= images[category].images.length) {
                    ++category;
                    if (category >= images.length) {
                        category = 0;
                    }
                    switchCategory(category);
                } else {
                    switchSlide(index, true);
                }
            }

            $(".slideCat").click(function (e) {
                clearInterval(timer);
                switchCategory(this.rel);
                timer = setInterval(doTransition, 5000);
                return false;
            });

            $(".prev").click(function (e) {
                clearInterval(timer);
                --index;
                if (index < 0) {
                    --category;
                    if (category < 0) {
                        category = images.length - 1;
                    }
                    switchCategory(category);
                    switchSlide(images[category].images.length - 1);
                } else {
                    switchSlide(index);
                }
                timer = setInterval(doTransition, 5000);
                return false;
            });

            $(".next").click(function (e) {
                clearInterval(timer);
                ++index;
                if (index >= images[category].images.length) {
                    ++category;
                    if (category >= images.length) {
                        category = 0;
                    }
                    switchCategory(category);
                } else {
                    switchSlide(index, false);
                }
                timer = setInterval(doTransition, 15000);
                return false;
            });

            // this doesn't work! hover gets triggered like this, but we don't know which <li/> we're over.
            // if we use e.g. $(".holder", slider) or $("li", slider), the event doesn't get triggered :(
            $(slider).hover(function () {
                console.log("hover");
                clearInterval(timer);
                $(this).find(".caption").stop().fadeTo(500, 0.8);
            }, function() {
                $(this).find(".caption").stop().fadeTo(500, 0);
                timer = setInterval(doTransition, 15000);
            });

            // load the categories
            initCategories();
            switchCategory(0);
            switchSlide(0, false);
            timer = setInterval(doTransition, 15000);
       });

Answer 1

我从代码中的评论中看到，您还在努力使用.hover()事件处理程序。要实现此功能，请尝试将slider变量从jQuery对象$('#slider-container')更改为字符串'#slider-container'，并将对slider变量的调用更改为$(slider)因此。最后，对于.hover()事件，请将$(slider).hover更改为$(slider+' li').hover。这会将hover事件处理程序附加到#slider-container的每个子列表项。

编辑：这是如何实现所需的过渡效果：

首先，在这段代码中：

// load the categories
initCategories();
switchCategory(0);
switchSlide(0, false);
timer = setInterval(doTransition, 15000);

将timer = setInterval(doTransition, 15000);更改为：

timer = setTimeout(doTransition, 20000);

在加载第一张图像之后，这将延迟20秒，然后再将其替换为第二张图像。

接下来，将setInterval的所有其他实例更改为setTimeout和clearInterval更改为clearTimeout。这将使我们能够更好地控制每次转换的长度（setInterval启动无限动作延迟循环，而setTimeout只发生一次。）

最后，在doTransition()函数中，在switchCategory(category);之后输入：

timer = setTimeout(doTransition, 20000);

...如果您希望每个类别中的第一张图片延迟20秒，或者：

if (category == 0) 
{
    timer = setTimeout(doTransition, 20000);
}
else
{
    timer = setTimeout(doTransition, 15000);
}

将20秒延迟应用于幻灯片中的第一张图片。

最后但并非最不重要的是，在switchSlide(index, true);之后输入：

timer = setTimeout(doTransition, 15000);

...将标准的15秒延迟应用于剩余的幻灯片间转换。这应该是你需要的一切！

如何在某个类别上停留更长时间？

1 个答案: