使用move.js实现淘宝风格幻灯片切换-优快云博客

本文通过move.js框架，详细讲解如何实现点击提示按钮来切换淘宝风格的幻灯片效果，提供了一种JavaScript实现幻灯片动态切换的方法。

本例仅作为运动框架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>