幻灯效果合集（Ⅰ）

• 放大效果

HTML

<img src="cricci.jpg" alt="Muse: Christina Ricci" big="cricci-large.jpg" id="ricci" />

 

JavaScript

window.addEvent('domready',function() {
    new Zoomer('ricci',{ 
        smooth: 10/*,
        big: 'cricci-large.jpg' */
    });
});
 

Demo

 

• 缩略图+文字

HTML

<div id="slideshow-container">
    <img src="slideshow/cricci1.jpg" alt="Christina Ricci 1::This is the caption for photo 1.">
    <img src="slideshow/cricci2.jpg" alt="Christina Ricci 2::This is the caption for photo 2.">
    <img src="slideshow/cricci3.jpg" alt="Christina Ricci 3::This is the caption for photo 3.">
    <img src="slideshow/cricci4.jpg" alt="Christina Ricci 4::This is the caption for photo 4.">
    <img src="slideshow/cricci5.jpg" alt="Christina Ricci 5::This is the caption for photo 5.">
 </div>

 

CSS

#slideshow-container    { width:512px; height:384px; position:relative; }
#slideshow-container img { width:512px; height:384px; display:block; position:absolute; top:0; left:0; z-index:1; }
#slideshow-container-controls { margin:10px 0 0 0; }
    #slideshow-container-controls img { cursor:pointer; width:100px; height:75px; border:1px solid #ccc; float:left; margin:0 1px 0 0; }
#slideshow-container-caption  { height:70px; position:absolute; bottom:0; left:0; right:0; background:#000; z-index:10; overflow:hidden; }
    * html #slideshow-container-caption { width:100%; }
    #slideshow-container-caption h3 { font-size:24px; font-weight:bold; color:#fff; padding:10px 10px 3px 10px; }
    #slideshow-container-caption p    { color:#eee; font-size:11px; padding:0 10px 10px 10px; }
.toc-active                { border-color:#000; }

 

JavaScript

window.addEvent('domready',function() {
    /* settings */
    var showDuration = 5000;
    var container = $('slideshow-container');
    var images = container.getElements('img');
    var currentIndex = 0;
    var interval;
    var toc = [];
    var tocActive = 'toc-active';
    var thumbOpacity = 0.7;
    
    /* new: create caption area */
    var captionDIV = new Element('div',{
        id: 'slideshow-container-caption',
        styles: {
            //display:none,
             opacity: thumbOpacity
        }
    }).inject(container);
    var captionHeight = captionDIV.getSize().y;
    captionDIV.setStyle('height',0);
    
    /* new: starts the show */
    var start = function() { interval = show.periodical(showDuration); };
    var stop = function() { $clear(interval); };
    /* worker */
    var show = function(to) {
        images[currentIndex].fade('out');
        toc[currentIndex].removeClass(tocActive).fade(thumbOpacity);
        images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
        toc[currentIndex].addClass(tocActive).fade(1);
        captionDIV.set('tween',{
            onComplete: function() {
                captionDIV.set('tween',{
                    onComplete: $empty
                }).tween('height',captionHeight);
                /* parse caption */
                var title = '';
                var captionText = '';
                if(images[currentIndex].get('alt')) {
                    cap = images[currentIndex].get('alt').split('::');
                    title = cap[0];
                    captionText = cap[1];
                    captionDIV.set('html','<h3>' + title + '</h3>' + (captionText ? '<p>' + captionText + '</p>' : ''));
                }
            }
        }).tween('height',0);
    };
    
    /* new: create preview area */
    var preview = new Element('div',{
        id: 'slideshow-container-controls'
    }).inject(container,'after');
    
    /* new: control: table of contents */
    images.each(function(img,i){
        /* add to table of contents */
        toc.push(new Element('img',{
            src: img.get('src'),
            title: img.get('alt'),
            styles: {
                opacity: thumbOpacity
            },
            events: {
                click: function(e) {
                    if(e) e.stop();
                    stop();
                    show(i);
                    start();
                },
                mouseenter: function() {
                    this.fade(1);
                },
                mouseleave: function() {
                    if(!this.hasClass(tocActive)) this.fade(thumbOpacity);
                }
            }    
        }).inject(preview));
        if(i > 0) { img.set('opacity',0); }
        
    });
    
    /* control: start/stop on mouseover/mouseout */
    container.addEvents({
        mouseenter: function() { stop(); },
        mouseleave: function() { start(); }
    });
    
    /* start once the page is finished loading */
    window.addEvent('load',function(){ show(0); start(); });
});

 

Demo

• 简单幻灯

HTML

#slideshow-holder    { width:600px; height:400px; background:url(spinner.gif) center center no-repeat #fff; position:relative; }
#progress            { position:absolute; width:100%; text-align:center; color:#999; top:225px; }
 

 

CSS

#slideshow-holder    { width:600px; height:400px; background:url(spinner.gif) center center no-repeat #fff; position:relative; }
#progress            { position:absolute; width:100%; text-align:center; color:#999; top:225px; }

 

JavaScript

window.addEvent('domready',function() {
    /* preloading */
    var imagesDir = 'epics/';
    var images = ['2.jpg','3.jpg','1.jpg','4.jpg','5.jpg'];
    var holder = $('slideshow-holder');
    images.each(function(img,i){ images[i] = imagesDir + '' + img; }); //add dir to images
     var progressTemplate = 'Loading image {x} of ' + images.length;
    var updateProgress = function(num) {
        progress.set('text',progressTemplate.replace('{x}',num));
    };
    var progress = $('progress');
    updateProgress('text','0');
    var loader = new Asset.images(images, {
        onProgress: function(c,index) {
            updateProgress('text',index + 1);
        },
        onComplete: function() {
            var slides = [];
            /* put images into page */
            images.each(function(im) {
                slides.push(new Element('img',{
                    src:im,
                    width: 600,
                    height: 400,
                    styles: {
                        opacity:0,
                        top:0,
                        left:0,
                        position:'absolute',
                        'z-index': 10
                    }
                }).inject(holder));
                holder.setStyle('background','url(logo.png) center 80px no-repeat');
            });
            var showInterval = 5000;
            var index = 0;
            progress.set('text','Images loaded.  MooTools FTW.');
            (function() {slides[index].tween('opacity',1); }).delay(1000);
            var start = function() {
                (function() {
                    holder.setStyle('background','');
                    slides[index].fade(0);
                    ++index;
                    index = (slides[index] ? index : 0);
                    slides[index].fade(1);
                }).periodical(showInterval);
            };

            /* start the show */
            start();
        }
    });
});
 

 

Demo