js运动实例-淘宝幻灯片

来源：互联网发布：软件开发流程模版编辑：程序博客网时间：2024/05/29 11:46
本例仅作为运动框架move.js的扩展应用，实现点击下方提示按钮切换幻灯片的功能。
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            #div1{                width: 400px;                height: 400px;                margin: 50px auto;                position: relative;                overflow: hidden;            }            #ul1{                list-style: none;                position: absolute;                left: 0;                top: 0;            }            #ul1 li{                float: left;            }            img{                display: block;            }            #div2{                position: absolute;                bottom: 10px;                overflow: hidden;                left: 50%;                margin-left: -40px;            }            #div2 span{                display: block;                width: 10px;                height: 10px;                background: #999999;                border-radius: 50%;                float: left;                margin: 0 5px;                cursor: pointer;            }            #div2 span.current{                background: #f90;            }        </style>        <script src="js/move.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            window.onload=function(){                var oDiv=document.getElementById("div1");                var oUl=document.getElementById("ul1");                var aLi=oUl.getElementsByTagName('li');                var aSpan=oDiv.getElementsByTagName('span');                var len=aLi.length;                var iWidth=aLi[0].offsetWidth;                oUl.style.width=len*iWidth+'px';                for (var i=0; i<len; i++) {                    aSpan[i].index = i;                    aSpan[i].onclick=function(){                        for (var i=0; i<len; i++) {                            aSpan[i].className='';                        }                        this.className='current';                        startMove(oUl,{                            left:-this.index*iWidth                        })                    }                }            }        </script>    </head>    <body>        <div id="div1">            <ul id="ul1">                <li><img src="img/1.jpg"/></li>                <li><img src="img/2.jpg"/></li>                <li><img src="img/3.jpg"/></li>                <li><img src="img/4.jpg"/></li>            </ul>            <div id="div2">                <span class="current"></span>                <span></span>                <span></span>                <span></span>            </div>        </div>    </body></html>
0 0