jQuery幻灯片代码无法正常工作

Question

I'm building a simple jQuery slideshow that I'm using for my website.

I found the code here (and did some adjustments): http://www.barrelny.com/blog/building-a-jquery-slideshow-plugin-from-scratch/ (my only requirements were that the code had to be built from scratch, be lightweight, use CSS3 Transitions and slide automatically every fifth second.)

The problem is, I can't even get anything to happen with my code. Anyways, here it is.

(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);

And here's the fiddle: http://jsfiddle.net/b7PLz/

I really hope somebody could help me - any help will be appreciated. Thanks

Answer 1

I've updated your jsfiddle and now it works perfectly. Your problem, apart from a typo in the code (there was an 's' before 'var methods') and that you were executing the plugin function in the DOMready event handler and invoking it at the end of the body tag, was that your slides were arranged vertically inside the slideshow container. As the slideshow container has a specific height and overflow hidden, they were invisible. I changed that, setting the articles to position absolute so the articles ar now one upon the other. Besides, without position absolute or relative z-index doesn't work.

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

Answer 2

I open a second answer to post the new code.

I've updated the jsfiddle , now the transition is a slide, and the code is simpler:

(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;
};
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',
                slideTimer,
                activeSlide,
                $slides = $container.find(slideSelector),
                $carousel = $slides.parent();
                totalSlides = $slides.length;
                $carousel.css('width', (totalSlides * 100) + '%');
                $pagerList = $container.find('#control');
                prefix = prefix($container[0]);
            function waitForNext(){
                slideTimer = setTimeout(function(){
                    changeSlides('next');
                },config.slideDur);
            };
            function animateSlides(){
                $pagers.removeClass('active').eq(newSlide).addClass('active');
                var $slide = $slides.eq(newSlide);
                var offset = $slide.position().left;
                console.log(offset);
                var styles = {};
                styles[prefix+'transition-duration'] = config.fadeDur+'ms';
                styles[prefix+'transform'] = 'translate3d(-'+offset+'px, 0px, 0px)';
                console.log(styles);
                $carousel.css(styles);
                waitForNext();
            };
            function changeSlides(target){
                if(target == 'next'){
                    newSlide = activeSlide + 1;
                    if(newSlide >= totalSlides){
                        newSlide = 0;
                    }
                } else if(target == 'prev'){
                    newSlide = activeSlide - 1;
                    if(newSlide < 0){
                        newSlide = totalSlides - 1;
                    };
                } else {
                    newSlide = Math.max(0, Math.min(target, totalSlides - 1));
                };
                activeSlide = newSlide;
                animateSlides();
            };
            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');
            activeSlide = 0;
            slideTimer = setTimeout(function(){
                changeSlides('next');
            },config.slideDur);
        });
    }
};
$.fn.easyFader = function(settings){
    return methods.init.apply(this, arguments);
};
console.log('here');

})(jQuery);

You have to wrap the articles in another div with id 'carousel'.

Right now, when the slideshow reaches the last slide, it goes back to the beginning. If you want to always advance from right to left, and go back from left to right, it becomes a bit more complex. You could try bxSlider , that already allows you to do this, with many more options.