coupon-share/eg/slideshow.js

/**
 * Created by libo on 2017/11/9.
 */
window.onload = function(){
    /*
     * 1.×Ô¶¯ÂÖ²¥  ¶¨Ê±Æ÷  ÎÞ·ìÏÎ½Ó  ¶¯»­½áÊø˲¼ä¶¨Î»
     * 2.µãÐèÒªËæ×ÅÂÖ²¥µÄ¹ö¶¯¸Ä±ä¶ÔÓ¦µÄµã  ¸Ä±äµ±Ç°Ñùʽ  µ±Ç°Í¼Æ¬µÄË÷Òý
     * 3.ÊÖÖ¸»¬¶¯µÄʱºòÈÃÂÖ²¥Í¼»¬¶¯   touchʼþ  ¼Ç¼×ø±êÖáµÄ¸Ä±ä ¸Ä±äÂÖ²¥Í¼µÄ¶¨Î»£¨Î»ÒÆcss3£©
     * 4.µ±»¬¶¯µÄ¾àÀë²»³¬¹ýÒ»¶¨µÄ¾àÀëµÄʱºò  ÐèÒªÎü¸½»ØÈ¥  ¹ý¶ÉµÄÐÎʽȥ×ö
     * 5.µ±»¬¶¯³¬¹ýÁËÒ»¶¨µÄ¾àÀë  ÐèÒª Ìøµ½ ÏÂÒ»ÕÅ»òÕßÉÏÒ»ÕÅ  £¨»¬¶¯µÄ·½Ïò£© Ò»¶¨µÄ¾àÀ루ÆÁÄ»µÄÈý·ÖÖ®Ò»£©
     * */

    var imageCount = 7; //Ò³ÃæÖÐÓÃÀ´ÂÖ²¥µÄͼƬÓÐ5ÕŲ»Í¬µÄ
    //ÂÖ²¥Í¼´óºÐ×Ó
    var banner = document.querySelector('.banner');
    //ͼƬµÄ¿í¶È
    var width = banner.offsetWidth;
    //ͼƬºÐ×Ó
    var imageBox = banner.querySelector('ul:first-child');
    //µãºÐ×Ó
    var pointBox = banner.querySelector('ul:last-child');
    //ËùÓеĵã
    var points = pointBox.querySelectorAll('li');

    //¹«Ó÷½·¨
    //¼Ó¹ý¶É
    var addTransition = function(){
        imageBox.style.transition = "all 0.3s";
        imageBox.style.webkitTransition = "all 0.3s";/*×ö¼æÈÝ*/
    };
    //Çå³ý¹ý¶É
    var removeTransition = function(){
        imageBox.style.transition = "none";
        imageBox.style.webkitTransition = "none";
    }
    //¶¨Î»
    var setTranslateX = function(translateX){
        var translateX = translateX + 375
        imageBox.style.transform = "translateX("+translateX+"px)";
        imageBox.style.webkitTransform = "translateX("+translateX+"px)";
    }

    //¹¦ÄÜʵÏÖ
    //×Ô¶¯ÂÖ²¥  ¶¨Ê±Æ÷  ÎÞ·ìÏÎ½Ó  ¶¯»­½áÊø˲¼ä¶¨Î»
    var index = 1;
    var timer = setInterval(function(){
        index++ ;   //×Ô¶¯ÂÖ²¥µ½ÏÂÒ»ÕÅ
        addTransition();    //¼Ó¹ý¶É¶¯»­
        setTranslateX(-index * width);  //¶¨Î»
    },3000);

    //µÈ¹ý¶É½áÊøÖ®ºóÀ´×öÎÞ·ìÏνÓ
    my.transitionEnd(imageBox, function(){
        //´¦Àíʼþ½áÊøºóµÄÒµÎñÂß¼­
        if(index > imageCount ){
            index = 1;
        }else if(index <= 0){
            index = imageCount;
        }
        removeTransition(); //Çå³ý¹ý¶É
        setTranslateX(-index * width);  //¶¨Î»
        setPoint(); //ÉèÖõײ¿ÏÔʾµ±Ç°Í¼Æ¬¶ÔÓ¦µÄÔ²½Ç
    });

    //¸Ä±äµ±Ç°Ñùʽ  µ±Ç°Í¼Æ¬µÄË÷Òý
    var setPoint = function(){
        //Çå³ýÉÏÒ»´ÎµÄnow
        for(var i = 0 ; i < points.length ; i++){
            points[i].className = " ";
        }
        //¸øͼƬ¶ÔÓ¦µÄµã¼ÓÉÏÑùʽ
        points[index-1].className = "now";
    }

    /*
     ÊÖÖ¸»¬¶¯µÄʱºòÈÃÂÖ²¥Í¼»¬¶¯   touchʼþ  ¼Ç¼×ø±êÖáµÄ¸Ä±ä ¸Ä±äÂÖ²¥Í¼µÄ¶¨Î»£¨Î»ÒÆcss3£©
     µ±»¬¶¯µÄ¾àÀë²»³¬¹ýÒ»¶¨µÄ¾àÀëµÄʱºò  ÐèÒªÎü¸½»ØÈ¥  ¹ý¶ÉµÄÐÎʽȥ×ö
     µ±»¬¶¯³¬¹ýÁËÒ»¶¨µÄ¾àÀë  ÐèÒª Ìøµ½ ÏÂÒ»ÕÅ»òÕßÉÏÒ»ÕÅ  £¨»¬¶¯µÄ·½Ïò£© Ò»¶¨µÄ¾àÀ루ÆÁÄ»µÄÈý·ÖÖ®Ò»£©
     */
    //touchʼþ
    var startX = 0; //¼Ç¼Æðʼ  ¸Õ¸Õ´¥ÃþµÄµãµÄλÖà xµÄ×ø±ê
    var moveX = 0;  //»¬¶¯µÄʱºòxµÄλÖÃ
    var distanceX = 0;  //»¬¶¯µÄ¾àÀë
    var isMove = false; //ÊÇ·ñ»¬¶¯¹ý

    imageBox.addEventListener('touchstart', function(e){
        clearInterval(timer);   //Çå³ý¶¨Ê±Æ÷
        startX = e.touches[0].clientX;  //¼Ç¼ÆðʼX
    });

    imageBox.addEventListener('touchmove',function(e){
        moveX = e.touches[0].clientX;   //»¬¶¯Ê±ºòµÄX
        distanceX = moveX - startX; //¼ÆËãÒƶ¯µÄ¾àÀë
        //¼ÆË㵱ǰ¶¨Î»  -index*width+distanceX
        removeTransition(); //Çå³ý¹ý¶É
        setTranslateX(-index * width + distanceX);  //ʵʱµÄ¶¨Î»
        isMove = true;  //Ö¤Ã÷»¬¶¯¹ý
    });

    //ÔÚÄ£ÄâÆ÷ÉÏÄ£ÄâµÄ»¬¶¯»áÓÐÎÊÌâ ¶ªÊ§µÄÇé¿ö  ×îºóÔÚÄ£ÄâÆ÷µÄʱºòÓÃwindow
    imageBox.addEventListener('touchend', function(e){
        // »¬¶¯³¬¹ý 1/3 ¼´Îª»¬¶¯ÓÐЧ£¬·ñÔò¼´ÎªÎÞЧ£¬ÔòÎü¸½»ØÈ¥
        if(isMove && Math.abs(distanceX) > width/3){
            //5.µ±»¬¶¯³¬¹ýÁËÒ»¶¨µÄ¾àÀë  ÐèÒª Ìøµ½ ÏÂÒ»ÕÅ»òÕßÉÏÒ»ÕÅ  £¨»¬¶¯µÄ·½Ïò£©*/
            if(distanceX > 0){  //ÉÏÒ»ÕÅ
                index --;
            }
            else{   //ÏÂÒ»ÕÅ
                index ++;
            }
        }
        addTransition();    //¼Ó¹ý¶É¶¯»­
        setTranslateX(-index * width);    //¶¨Î»

        if(index > imageCount ){
            index = 1;
        }else if(index <= 0){
            index = imageCount;
        }
        setPoint();

        //ÖØÖòÎÊý
        startX = 0;
        moveX = 0;
        distanceX = 0;
        isMove = false;
        //¼Ó¶¨Ê±Æ÷
        clearInterval(timer);   //ÑϽ÷ ÔÙÇå³ýÒ»´Î¶¨Ê±Æ÷
        timer= setInterval(function(){
            index++ ;  //×Ô¶¯ÂÖ²¥µ½ÏÂÒ»ÕÅ
            addTransition();    //¼Ó¹ý¶É¶¯»­
            setTranslateX(-index * width);    //¶¨Î»
        },3000);
    });
};