js运动模仿淘宝幻灯

浏览数：27 / 时间：2015年06月09日

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            #div1{
                width:600px;height:400px;border:1px solid #000;margin: 100px auto 0; position: relative;overflow:hidden;
            }
            #ul1{
                position: absolute;left: 0;top: 0;margin: 0;padding: 0;
            }
            li{
                list-style-type: none;float: left;
            }
            img{display: block;}
            #div1 p { text-align: center; position: absolute; width: 100%; bottom: 10px;}
            #div1 p span {padding: 2px 9px; background: #CCC; border-radius: 50%; margin-left: 5px; cursor: pointer;}
            #div1 p span.current { background:#F90;}
        </style>
        <script>
            window.onload = function (){
                var odiv = document.getElementById(‘div1‘);
                var oul = document.getElementById(‘ul1‘);
                var ali = oul.getElementsByTagName(‘li‘);
                var aspan = odiv.getElementsByTagName(‘span‘);
                var ilen = ali.length;
                var iwidth = ali[0].offsetWidth;

                oul.style.width = ilen * iwidth + ‘px‘;
                for(var i = 0; i < ilen; i++)
                {
                    aspan[i].index = i;
                    aspan[i].onclick = function(){
                        for(var i = 0; i < ilen; i++)
                        {
                            aspan[i].className = ‘‘;
                        }
                        this.className = ‘current‘;
                        startMove(oul, {
                            left : -this.index * iwidth
                        });
                    }

                }

            }
            function startMove(obj, json, fn) {
                clearInterval(obj.iTimer);
                var iCur = 0;
                var iSpeed = 0;
                    
                obj.iTimer = setInterval(function() {
                    
                    var iBtn = true;
                                
                    for ( var attr in json ) {
                                        
                        var iTarget = json[attr];
                        
                        if (attr == ‘opacity‘) {
                            iCur = Math.round(css( obj, ‘opacity‘ ) * 100);
                        } else {
                            iCur = parseInt(css(obj, attr));
                        }
                        
                        iSpeed = ( iTarget - iCur ) / 8;
                        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                        
                        if (iCur != iTarget) {
                            iBtn = false;
                            if (attr == ‘opacity‘) {
                                obj.style.opacity = (iCur + iSpeed) / 100;
                                obj.style.filter = ‘alpha(opacity=‘+ (iCur + iSpeed) +‘)‘;
                            } else {
                                obj.style[attr] = iCur + iSpeed + ‘px‘;
                            }
                        }
                        
                    }
                    
                    if (iBtn) {
                        clearInterval(obj.iTimer);
                        fn && fn.call(obj);
                    }
                    
                }, 30);
            }

        function css(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        </script>
    </head>
    <body>
        
        <div id = "div1">
            <ul id="ul1">
                <li><img src="img/5-1.jpg"></li>
                <li><img src="img/5-2.jpg"></li>
                <li><img src="img/5-3.jpg"></li>
                <li><img src="img/5-4.jpg"></li>
                <li><img src="img/5-5.jpg"></li>
                <li><img src="img/5-6.jpg"></li>
            </ul>
            <p>
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            </p>
        </div>
    </body>
</html>