纯手工打造传统轮播 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        width: 10000px;

    }
    ul li{
        float: left;
        list-style: none;
    }
    .container{
        width: 560px;
        height: 300px;
        border:4px solid #000;
        margin: 0 auto;
        /*overflow: hidden;*/
    }
    span{
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color:red;
        color:#fff;
        font-size: 30px;
    }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
            <li><img src="4.jpg" alt=""></li>
            <li><img src="1.jpg" alt=""></li>
        </ul>
    </div>

    <span class="zuoanniu">左按钮</span>
    <span class="youanniu">右按钮</span>


    <script src="jquery.min.js"></script>
    <script>
    var i=0;
        $(".youanniu").on('click',function(){
            if(!$("ul").is(":animated")){//防止动画积累
                i++;
                if(i<4){
                    $("ul").animate({'margin-left':-560*i+'px'})
                }else{
                    i=0;
                    $("ul").animate({'margin-left':-560*4+'px'},function(){
                        $("ul").css("margin-left",-560*i+'px');
                    })
                }
            }
        });

        $(".zuoanniu").on('click',function(){
            if(!$("ul").is(':animated')){//防止动画积累
                if(i>0){
                    i--;
                    $("ul").animate({'margin-left':-560*i+'px'})
                }else{
                    i=3;
                    $("ul").css("margin-left",-560*4+'px');
                    $("ul").animate({'margin-left':-560*3+'px'})
                }
            }
        });
    </script>
</body>
</html>

先上代码！！！！

 

 

 

具体目录结构是上面的这样的！！

实际用的时候

.container{
width: 560px;
height: 300px;
border:4px solid #000;
margin: 0 auto;
/*overflow: hidden;*/
}

overflow:hidden;加上！！！

ps:比较简单，适合初学者，仅仅是分享，各位多多提意见！！！谢谢~~~

posted @ 2016-05-12 12:35  竹香子  阅读(140)  评论(0)    收藏  举报