一个改编于swipe.js的滑动（需jLazy.js支持）

var slideData = {
    id:"slide_images", 
    container:"slide_container", 
    w:320, 
    h:80, 
    amt:3, 
    defaultIndex:0, 
    speed:300,
    animate:1,
    direction:1,
    delay:5000,
    contents:[
        {
"data-href":"events.html", 
"src":"images/events.jpg"
},
{
"data-href":"register.html", 
"src":"images/events1.jpg"
},
{
"data-href":"takeorder.html", 
"src":"images/events2.jpg"
},


        /*{
"data-href":"register.html", 
"src":"images/events1.jpg"
},*/
    ],
};


function slide(data){
    
    if(!data){
        return false;
    }
   
    var width = (data.w) ? data.w : 320;


    var container = $e("div");
    container.s("id", data.container);
    container.s("style", "width:" + width + "px;height:" + data.h + "px;");


    var slidesNode = $e("div");
    slidesNode.s("id", "slide_images");
    slidesNode.s("style", "width:" + (width * n(data.amt)) + "px;");
 
    container.a(slidesNode);  
    
    for(var i=0; i<data.contents.length; i++){
        var div = $e("div");
        var img = $e("img");
        
        for(var x in data.contents[i]){
            if(x == "src"){
                img.s(x, data.contents[i][x]);
            }else{
                div.s(x, data.contents[i][x]);                    
                if(i == 0){
                    div.s("style", "width:" + width + "px;left:" + (0 - width * i) + "px;" 
                        + "transform:translate(" + (0) + "px, 0px) translateZ(0px);" 
                        + "-webkit-transform:translate(" + (0) + "px, 0px) translateZ(0px);"
                    );


                    div.s("data-posx", 0);


                }else if(i == data.contents.length - 1){
                    div.s("style",  "width:" + width + "px;left:" + (0 - width * i) + "px;" 
                        + "transform:translate(" + (0 - width) + "px, 0px) translateZ(0px);" 
                        + "-webkit-transform:translate(" + (0 - width) + "px, 0px) translateZ(0px);"
                    );


                    div.s("data-posx", width);
                }else{
                    div.s("style",  "width:" + width + "px;left:" + (0 - width * i) + "px;" 
                        + "transform:translate(" + (width) + "px, 0px) translateZ(0px);" 
                        + "-webkit-transform:translate(" + (width) + "px, 0px) translateZ(0px);"
                    );


                    div.s("data-posx", width);
                }
            }
            
            div.s("data-index", i);
        }


        div.a(img);
        slidesNode.a(div);


    }
        
        
    var indicatorW = (width / data.amt).toFixed(0);
    var indicatorH = 3;
    var indicatorPos = -6;
    var indicatorBNode = $e("div");
indicatorBNode.s("style", "background:#000000;height:" 
            + indicatorH + "px;width:" + width + "px;position:relative;top:" 
            + (indicatorPos) + "px;opacity:0.5");
var indicatorFNode = $e("div");
indicatorFNode.s("id", "slide_indicator");
indicatorFNode.s("style", "background:#ed6d00;height:" 
            + indicatorH + "px;width:" + indicatorW + "px;position:relative;top:" 
            + (indicatorPos - indicatorH) + "px;left:" + indicatorW * slideIndex + "px;opacity:1.0");
container.a(indicatorBNode);
container.a(indicatorFNode);


 
    var slides = slidesNode.cbt("div");


    var speed = (data.speed) ? data.speed : 1000;
       
    var slideIndex = 0;
    
    /*function translateX(index, dist, dur, isTmp){
        
        //to left
        if(index == -1){           
            return;
        }
        
        if(index == slides.length){     
            return;
        }
         
        var slide = slides[index];
        
        var posx;
        
        if(n(slide.abdn("posx")) == dist){
            posx = dist;
        }else{
            posx = n(slide.abdn("posx")) + dist;
        }
        
        slide.s("style", "width:" + slide.style.width + ";left:" + slide.style.left + ";"
            + "transform:translate(" + posx + "px, 0px) translateZ(0px);" 
            + "-webkit-transform:translate(" + posx + "px, 0px) translateZ(0px);"
            + "transition-duration:" + dur + "ms;"
            + "-webkit-transition-duration:" + dur + "ms;");
        if(!isTmp || isTmp === undefined){
            slide.s("data-posx", posx);
        }
    
    }*/


    /*function translateX(index, dist, dur, isTmp){
        
        //to left
        if(index == -1){           
            return;
        }
        
        if(index == slides.length){     
            return;
        }
         
        var slide = slides[index];
        
        var posx;
        if(normalSlide){
            if(n(slide.abdn("posx")) == dist){
                posx = dist;
            }else{
                posx = n(slide.abdn("posx")) + dist;
            }
        }else{
            posx = dist;
        }
        slide.s("style", "width:" + slide.style.width + ";left:" + slide.style.left + ";"
            + "transform:translate(" + posx + "px, 0px) translateZ(0px);" 
            + "-webkit-transform:translate(" + posx + "px, 0px) translateZ(0px);"
            + "transition-duration:" + dur + "ms;"
            + "-webkit-transition-duration:" + dur + "ms;");
        if(!isTmp || isTmp === undefined){
            slide.s("data-posx", posx);
        }
    
    }*/
    
    function translateX(index, dist, dur, isTmp){
        
        //to left
        if(index < 0){           
            return;
        }
        
        if(index > slides.length - 1){     
            return;
        }
         
        var slide = slides[index];
        
        var posx;
        
        if(normalSlide){
            if(n(slide.abdn("posx")) == dist){
                posx = dist;
            }else{
                posx = n(slide.abdn("posx")) + dist;
            }
        }else{
            posx = dist;
        }


        //debug(index + " " + posx);


        slide.s("style", "width:" + slide.style.width + ";left:" + slide.style.left + ";"
            + "transform:translate(" + posx + "px, 0px) translateZ(0px);" 
            + "-webkit-transform:translate(" + posx + "px, 0px) translateZ(0px);"
            + "transition-duration:" + dur + "ms;"
            + "-webkit-transition-duration:" + dur + "ms;");
        if(!isTmp || isTmp === undefined){
            slide.s("data-posx", posx);
        }
    
    }


    var leftMost = true;
    var normalSlide = true;
    
    function next(){
        
        normalSlide = false;
        translateX(slideIndex - 1, (width), 0);
        normalSlide = true;


        translateX(slideIndex, (0 - width), speed);
        translateX(slideIndex + 1, (0 - width), speed);
        
        normalSlide = false;
        translateX(slideIndex + 2, (width), 0);
        normalSlide = true; 
        
        slideIndex ++;


        if(slideIndex == slides.length){
            slideIndex = 0;
            translateX(slideIndex, (0 - width), speed);
        }


        $("slide_indicator").s("style", "background:#ed6d00;height:" 
                + indicatorH + "px;width:" + indicatorW + "px;position:relative;top:" 
                + (indicatorPos - indicatorH) + "px;left:" + indicatorW * (slideIndex) + "px;opacity:1.0");
    }
    
    function prev(){
    
        if(slideIndex == 0){
            
            normalSlide = false;
            for(var i=1; i <= slides.length-1; i++){
                translateX(i, (0 - width), 0);
                //debug(i);
            }
            normalSlide = true;
            
            translateX(slideIndex, (width), speed);
            
            slideIndex = slides.length;
            translateX(slideIndex - 1, (width), speed);
            //setTimeout(function(){
            //translateX(slides.length - 1, (width), speed);
            //},0);


            //slideIndex = slides.length;    
            
        }else if(slideIndex == slides.length - 1){
        
            normalSlide = false;
            translateX(0, (0 - width), 0);
            normalSlide = true;


            translateX(slideIndex, width, speed);
            
            translateX(slideIndex - 1, width, speed);
    
        }else{
            
            normalSlide = false;
            translateX(slideIndex + 1, (0 - width), 0);
            normalSlide = true;
            translateX(slideIndex, width, speed);            
            translateX(slideIndex - 1, width, speed);
        }
        
        slideIndex --;
        
        $("slide_indicator").s("style", "background:#ed6d00;height:" 
                + indicatorH + "px;width:" + indicatorW + "px;position:relative;top:" 
                + (indicatorPos - indicatorH) + "px;left:" + indicatorW * (slideIndex) + "px;opacity:1.0");
    }




    /*function next(){
    //container.next = function(){    
        if(slideIndex == slides.length - 1){
            leftMost = false;
            return;  
        }
    
        translateX(slideIndex - 1, (0 - width), speed);
        translateX(slideIndex, (0 - width), speed);
        translateX(slideIndex + 1, (0 - width), speed);
    
        slideIndex ++;


        $("slide_indicator").s("style", "background:#ed6d00;height:" 
                + indicatorH + "px;width:" + indicatorW + "px;position:relative;top:" 
                + (indicatorPos - indicatorH) + "px;left:" + indicatorW * (slideIndex) + "px;opacity:1.0");
        
    }
    
    function prev(){
    //container.prev = function(){
        if(slideIndex == 0){
            leftMost = true;
            return;  
        }
        
        translateX(slideIndex - 1, width, speed);
        translateX(slideIndex, width, speed);
        translateX(slideIndex + 1, width, speed);
    
        slideIndex --;


        $("slide_indicator").s("style", "background:#ed6d00;height:" 
                + indicatorH + "px;width:" + indicatorW + "px;position:relative;top:" 
                + (indicatorPos - indicatorH) + "px;left:" + indicatorW * (slideIndex) + "px;opacity:1.0");
    
    }*/
    
    container.forward = function(){
        next();
    }
    
    container.forward = function(){
        prev();
    }


    var delay = data.delay;


    var direction = data.direction;
 
    var animTimer;
    
    /*var d = $e("div");
    d.s("id", "d");
    d.s("style", "z-index:1000");
    d.a($t("delay = " + delay));
    container.a(d);*/




    /*function animate(){
                    
            
        if(!$("slide_indicator")){
            animTimer = setTimeout(animate, delay);
            return;
        }


        if(delay == 0){
            clearTimeout(animTimer);
            return;
        }


        if(direction == 1){                
            next();
        }else{
            prev();
        }
       
        animTimer = setTimeout(animate, delay);


    }*/
    
    var lastCalled = 0;


    function animate(){            
                
        var t = setInterval(function(){
            
            var now = new Date().getTime();
            if(lastCalled != 0 && now - lastCalled < delay){
                return;
            }else{
                lastCalled = now;
            }


            if(delay == 0){
                clearInterval(t);
                return;
            }
            if(direction == 1){ 
                debug(new Date());
                next();    
            }else{
                prev();
            }
        
        },delay);


    }


    function begin(){
        delay = data.delay;
        animate();
    }


    function stop(){
        delay = 0;
    }


    var isScrolling;


    //start point x, y and start time
    var start = {};
    //shift distance h, v
    var shift = {};


    var delegate = {
        
        //when delegate is bound to an event by addEventListener() as the 2nd param, 
        //handleEvent would be called automatically 
        handleEvent:function(event){            
            
            switch (event.type) {
                case 'touchstart': 
                    this.touchStart(event); 
                    break;
                
                case 'touchmove': 
                    this.touchMove(event); 
                    break;


                case 'touchend': 
                    this.touchEnd(event); 
                    break;
                
                case 'webkitTransitionEnd':
                    //debug('WEBKIT TR END' + "right most " + rightMost);
                    this.webkitTransitionEnd(event);
                    break;
                case 'transitionend':
                    break;


                case 'click':
                    //debug("click");
                    //stop();
                    //begin();
                    break;
            }


        },
        
        touchStart:function(event){


            var touches = event.touches[0];
            
            //init start info
            start = {
                x: touches.pageX,
                y: touches.pageY,
                time: new Date(),
            };
            
            // used for testing first move event
            isScrolling = undefined;


            //reset shift info
            shift = {};


            slidesNode.aal('touchmove', this, false);
            slidesNode.aal('touchend', this, false);
        },


        touchMove:function(event){


            var touches = event.touches[0];


            // ensure swiping with one touch and not pinching
            if (event.touches.length > 1 || event.scale && event.scale !== 1){ 
                return;
            }


            shift = {
                h: touches.pageX - start.x,
                v: touches.pageY - start.y
            }
            
            // determine if scrolling test has run - one time test
            // duto typeof isScrolling == 'undefined', value before || is false, 
            // sothat the after one, (Math.abs(shift.h) < Math.abs(shift.v)), is executed,
            // true for scrolling vertically, false for horizontally
            // !! to make sure the return value be boolean
            if (typeof isScrolling == 'undefined') {
                isScrollin = !!(isScrolling || Math.abs(shift.h) < Math.abs(shift.v));
            }


            if (!isScrolling) {


                // prevent native scrolling 
                event.preventDefault();


                // stop slideshow
                stop();
                
                //set resisitance of both side
                /*shift.h = shift.h / ((
                        slideIndex == 0 && shift.h > 0 || slideIndex == slides.length - 1 && shift.h < 0) 
                        ?(Math.abs(shift.h) / width + 10)
                        : 1);*/
                
                //shift.h = shift.h * 1.5; 


                if(shift.h > 0){
                    if(slideIndex != 0){
                        translateX(slideIndex - 1, (shift.h), 0, true);
                    }else{
                        //setTimeout(function(){
                            normalSlide = false;
                            translateX(slides.length - 1, (0 - width), 0);
                            normalSlide = true;
                            translateX(slides.length - 1, (shift.h), 0, true);
                        //},0);
                        
                    }
                    translateX(slideIndex, (shift.h), 0, true);


                }else{
                    translateX(slideIndex, (shift.h), 0, true);
                    if(slideIndex != slides.length - 1){
                        translateX(slideIndex + 1, (shift.h), 0, true);
                    }else{
                        translateX(0, (shift.h), 0, true);
                    }
                    
                }


                /*translateX(slideIndex - 1, (shift.h), 0, true);
                translateX(slideIndex, (shift.h), 0, true);
                translateX(slideIndex + 1, (shift.h), 0, true);*/
                               
            }


        },


        touchEnd:function(event){
            var duration = new Date() - start.time;
            
            if(!shift.h || Math.abs(shift.h) < 20){
                //linkTo()
                linkTo(slides[slideIndex].abdn("href"));
            }


            var isValidSlide = 
            duration < 250               // if slide duration is less than 250ms
            && Math.abs(shift.h) > 20            // and if slide amt is greater than 20px
            || Math.abs(shift.h) > width / 2;   // or if slide amt is greater than half the width
            
            if (!isScrolling) {


                if(isValidSlide){


                    if(shift.h < 0){
                        
                        next();
                    
                        //leftMost = true;
                    }else{
                        prev();
                    
                        //leftMost = false;                
                    }
                }else{
                    /*translateX(slideIndex - 1, (0 - width), speed);
                    translateX(slideIndex, 0, speed);
                    translateX(slideIndex + 1, width, speed);*/
                    if(shift.h > 0){
                        //translateX(slideIndex - 1, (0 - width), 0);
                        //translateX(slideIndex, 0, 0);


                        if(slideIndex != 0){
                            translateX(slideIndex - 1, (0 - width), 0);
                        }else{
                            //setTimeout(function(){
                                translateX(slides.length - 1, (0 - width), 0);        
                            //},0);
                        
                        }
                        translateX(slideIndex, 0, 0);


                    }else{
                        translateX(slideIndex, 0, 0);
                        if(slideIndex != slides.length - 1){
                            translateX(slideIndex + 1, width, 0);
                        }else{
                            translateX(0, width, 0);
                        }
                    }


                    /*translateX(slideIndex - 1, (0 - width), 0);
                    translateX(slideIndex, 0, 0);
                    translateX(slideIndex + 1, width, 0);*/
                }


            }


            begin();
            //setTimeout(begin, 5000);
        },
        webkitTransitionEnd:function(event){
            /*if(delay == 0 && data.animate == 1){
                begin();    
            }*/
        },
    } 
    
    slidesNode.aal("touchstart", delegate, false);
    slidesNode.aal("webkitTransitionEnd", delegate, false);
    slidesNode.aal("click", delegate, false);
    
    if(data.animate == 1){
        begin();
    }
    
    return container;


}