javascript - jQuery 幻灯片放映代码不起作用

Question

我正在构建一个用于我的网站的简单 jQuery 幻灯片。

我在这里找到了代码(并做了一些调整):http://www.barrelny.com/blog/building-a-jquery-slideshow-plugin-from-scratch/ (我唯一的要求是代码必须从头开始构建，轻量级，使用 CSS3 Transitions 并每五秒自动滑动一次。)

问题是，我什至无法让我的代码发生任何事情。不管怎样，就在这里。

(function($){
function prefix(el){
    var prefixes = ["webkit", "moz", "o", "ms"];
    for (var i = 0; i < prefixes.length; i++){
        if (prefixes[i] + "transition" in el.style){
            return '-'+prefixes[i].toLowerCase()+'-'; 
        };
    }; 
    return "transition" in el.style ? "" : false;
};
s    var methods = {
    init: function(settings){
        return this.each(function(){
            var config = {
                slideDur: 7000,
                fadeDur: 800
            };
            if(settings){
                $.extend(config, settings);
            };
            this.config = config;
            var $container = $(this),
                slideSelector = 'article',
                fading = false,
                slideTimer,
                activeSlide,
                newSlide,
                $slides = $container.find(slideSelector),
                totalSlides = $slides.length,
                $pagerList = $container.find('#control');
                prefix = prefix($container[0]);
            function waitForNext(){
                slideTimer = setTimeout(function(){
                    changeSlides('next');
                },config.slideDur);
            };
            function animateSlides(activeNdx, newNdx){
                function cleanUp(){
                    $slides.eq(activeNdx).removeAttr('style');
                    activeSlide = newNdx;
                    fading = false;
                    waitForNext();
                };
                if(fading || activeNdx == newNdx){
                    return false;
                };
                fading = true;
                $pagers.removeClass('active').eq(newSlide).addClass('active');
                $slides.eq(activeNdx).css('z-index', 3);
                $slides.eq(newNdx).css({
                    'z-index': 2,
                    'opacity': 1
                });
                var styles = {};
                styles[prefix+'transition'] = 'opacity '+config.fadeDur+'ms';
                styles['opacity'] = 0;
                $slides.eq(activeNdx).css(styles);
                var fadeTimer = setTimeout(function(){
                    cleanUp();
                },config.fadeDur);
            };
            function changeSlides(target){
                if(target == 'next'){
                    newSlide = activeSlide + 1;
                    if(newSlide > totalSlides - 1){
                        newSlide = 0;
                    }
                } else if(target == 'prev'){
                    newSlide = activeSlide - 1;
                    if(newSlide < 0){
                        newSlide = totalSlides - 1;
                    };
                } else {
                    newSlide = target;
                };
                animateSlides(activeSlide, newSlide);
            };
            for(var i = 0; i < totalSlides; i++){
                $pagerList
                    .append('<nav id="control" data-target="'+i+'">'+i+'</nav>');
            };
            $container.find('#control').bind('click',function(){
                var target = $(this).attr('data-target');
                clearTimeout(slideTimer);
                changeSlides(target);
            });
            var $pagers = $pagerList.find('#control');
            $slides.eq(0).css('opacity', 1);
            activeSlide = 0;
            slideTimer = setTimeout(function(){
                changeSlides('next');
            },config.slideDur);
        });
    }
};
$.fn.easyFader = function(settings){
    return methods.init.apply(this, arguments);
};
})(jQuery);

这是 fiddle :http://jsfiddle.net/b7PLz/

我真的希望有人能帮助我——我们将不胜感激。谢谢

Answer 1

我已经更新了你的 jsfiddle现在它完美地工作了。除了代码中的拼写错误('var 方法'之前有一个's')以及您在 DOMready 事件处理程序中执行插件函数并在 body 标记末尾调用它之外，您的问题是您的问题幻灯片在幻灯片容器内垂直排列。由于幻灯片容器具有特定的高度和隐藏的溢出，因此它们是不可见的。我改变了它，将文章设置为绝对定位，这样文章现在一个接一个。此外，没有位置绝对或相对 z-index 不起作用。

#slideshow article { 
  height: 345px; 
  width: 700px; 
  position: absolute; 
  top: 0px; 
  left: 0px; 
}