无缝轮播（框架版）

Posted 2020-10-09

无缝轮播（框架版）

<style type=‘text/css‘>
            *{ margin:0; padding:0;}
            
            #banner{
                width:520px;
                height:280px;
                margin:100px auto;
                border:1px solid #f00;
                position:relative;
            }
            #pic{
                width:520px;
                height:280px;
                overflow:hidden;
            }
            #pic ul{
                width:1000%;
                height:280px;
                margin-left:-520px;
            }
            #pic ul li{
                list-style:none;
                float:left;
            }
            #btn div{
                width:23px;
                height:36px;
                background:#000;
                background:rgba(0,0,0,.5);
                font-size:18px;
                color:#fff;
                font-weight:bold;
                text-align:center;
                line-height:36px;
                cursor:pointer;
                position:absolute;
                top:50%;
                margin-top:-18px;
            }
            #left{ left:0;}
            #right{ right:0;}

            #tab{
                width:71px;
                height:14px;
                background:#fff;
                background:rgba(255,255,255,.5);
                position:absolute;
                bottom:15px;
                left:50%;
                margin-left:-35px;
                border-radius:7px;
            }
            #tab ul li{
                list-style:none;
                float:left;
                width:10px;
                height:10px;
                background:#999;
                border-radius:100%;
                margin:2px 2px;
                cursor:pointer;
            }
            #tab ul li.on{
                background:#f60;
            }
        </style>

<div id="banner">
            <div id="pic">
                <ul>
                    <li><img src="img/5.jpg" alt="" /></li>
                    <li><img src="img/1.jpg" alt="" /></li>
                    <li><img src="img/2.jpg" alt="" /></li>
                    <li><img src="img/3.jpg" alt="" /></li>
                    <li><img src="img/4.jpg" alt="" /></li>
                    <li><img src="img/5.jpg" alt="" /></li>
                    <li><img src="img/1.jpg" alt="" /></li>
                </ul>
            </div>

            <div id="btn">
                <div id="left">&lt;</div>
                <div id="right">&gt;</div>
            </div>

            <div id="tab">
                <ul>
                    <li class=‘on‘></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>


        </div>

<script type="text/javascript" src=‘move.js‘></script>
        <script type="text/javascript">
            (function(){
                var tabLi = document.getElementById(‘tab‘).getElementsByTagName(‘li‘);
                var oUl = document.getElementById(‘pic‘).getElementsByTagName(‘ul‘)[0];
                var oRight = document.getElementById(‘right‘);
                var oLeft = document.getElementById(‘left‘);
                var oBanner = document.getElementById(‘banner‘);
                var ligoudaner = 0;
                var timer;
                var nowTime = 0;

                for ( var i=0;i<tabLi.length;i++ )
                {
                    tabLi[i].wangdachui = i;
                    tabLi[i].onclick = function(){
                        tabLi[ligoudaner].className = ‘‘; // 前一个变到没有
                        ligoudaner = this.wangdachui;
                        change();
                    };
                };

                oRight.onclick = function(){
                    if ( new Date() - nowTime > 300 )
                    {
                        nowTime = new Date();
                        tabLi[ligoudaner].className = ‘‘;
                        ligoudaner ++;
                        ligoudaner %= tabLi.length+1;
                        change();
                    }
                    
                };

                oLeft.onclick = function(){
                    if ( new Date() - nowTime > 300 )
                    {
                        nowTime = new Date();
                        tabLi[ligoudaner].className = ‘‘;
                        ligoudaner = ligoudaner<0?tabLi.length-1:ligoudaner-1;
                        change();
                    };
                };
                
                auto();
                
                oBanner.onmouseenter = function(){
                    clearInterval( timer );
                };

                oBanner.onmouseleave = function(){
                    auto();
                };

                function auto(){
                    timer = setInterval(function(){
                        tabLi[ligoudaner].className = ‘‘;
                        ligoudaner ++;
                        ligoudaner %= tabLi.length+1;
                        change();
                    },3000);
                };

                function change(){
                    var now = ligoudaner;
                    now %= tabLi.length;
                    if ( now < 0 )now = tabLi.length - 1;
                    tabLi[now].className = ‘on‘; // 当前这个加上on
                    move( oUl , {marginLeft : -520*(ligoudaner+1) + ‘px‘} , 300 , function(){
                        if ( ligoudaner == tabLi.length )
                        {
                            this.style.marginLeft = ‘-520px‘;
                            ligoudaner = now;
                        }
                        else if (ligoudaner == -1)
                        {
                            this.style.marginLeft = -520*tabLi.length + ‘px‘;
                            ligoudaner = now;
                        }
                    });
                };
            })();
    </script>

框架  move.js

function move(  obj , mJson , time , wangdachui , cv ){
    
    var startVal = {};
    var endVal = {};
    var startTime = new Date();
    cv = cv || ‘linear‘;

    for (var key in mJson )
    {
        startVal[key] = parseInt( getStyle(obj,key) );
        endVal[key] = parseInt( mJson[key] );
    };
    var timer = setInterval(function(){
        
        var t = new Date() - startTime;
        var d = time;
        if ( t >= d )
        {
            t = d;
            clearInterval( timer );
        }
        for ( var key in mJson )
        {
            var b = startVal[key];
            var c = endVal[key] - b;
            var s = Tween[cv]( t , b , c , d );
            obj.style[key] = s + ‘px‘;
        }
        if ( t == d )
        {
            wangdachui && wangdachui.call(obj);
        }
    },13);
    function getStyle( obj , attr ){
        return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    };
};
var Tween = {
    linear: function (t, b, c, d){  //匀速
        return c*t/d + b;
    },
    easeIn: function(t, b, c, d){  //加速曲线
        return c*(t/=d)*t + b;
    },
    easeOut: function(t, b, c, d){  //减速曲线
        return -c *(t/=d)*(t-2) + b;
    },
    easeBoth: function(t, b, c, d){  //加速减速曲线
        if ((t/=d/2) < 1) {
            return c/2*t*t + b;
        }
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInStrong: function(t, b, c, d){  //加加速曲线
        return c*(t/=d)*t*t*t + b;
    },
    easeOutStrong: function(t, b, c, d){  //减减速曲线
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
        if ((t/=d/2) < 1) {
            return c/2*t*t*t*t + b;
        }
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入）
        if (t === 0) { 
            return b; 
        }
        if ( (t /= d) == 1 ) {
            return b+c; 
        }
        if (!p) {
            p=d*0.3; 
        }
        if (!a || a < Math.abs(c)) {
            a = c; 
            var s = p/4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线（弹动渐出）
        if (t === 0) {
            return b;
        }
        if ( (t /= d) == 1 ) {
            return b+c;
        }
        if (!p) {
            p=d*0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },    
    elasticBoth: function(t, b, c, d, a, p){
        if (t === 0) {
            return b;
        }
        if ( (t /= d/2) == 2 ) {
            return b+c;
        }
        if (!p) {
            p = d*(0.3*1.5);
        }
        if ( !a || a < Math.abs(c) ) {
            a = c; 
            var s = p/4;
        }
        else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        if (t < 1) {
            return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
                    Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        }
        return a*Math.pow(2,-10*(t-=1)) * 
                Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
    },
    backIn: function(t, b, c, d, s){     //回退加速（回退渐入）
        if (typeof s == ‘undefined‘) {
           s = 1.70158;
        }
        return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    backOut: function(t, b, c, d, s){
        if (typeof s == ‘undefined‘) {
            s = 3.70158;  //回缩的距离
        }
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }, 
    backBoth: function(t, b, c, d, s){
        if (typeof s == ‘undefined‘) {
            s = 1.70158; 
        }
        if ((t /= d/2 ) < 1) {
            return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        }
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    bounceIn: function(t, b, c, d){    //弹球减振（弹球渐出）
        return c - Tween[‘bounceOut‘](d-t, 0, c, d) + b;
    },       
    bounceOut: function(t, b, c, d){
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
        }
        return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
    },      
    bounceBoth: function(t, b, c, d){
        if (t < d/2) {
            return Tween[‘bounceIn‘](t*2, 0, c, d) * 0.5 + b;
        }
        return Tween[‘bounceOut‘](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
    }
};

 

 

框架其它应用

var oBox = document.getElementById(‘box‘);
move( oBox , { marginLeft : ‘300px‘} , 1000 , function(){
                this.style.background = ‘green‘;
            });