求段Jquery手动向左向右滑动现实的代码

commemoration 2013-12-30 12:43:26

实现如上图功能，最好不用第三方插件，有的请指导，谢谢！

...全文

158 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

allali 2013-12-30

打赏
举报

<!DOCTYPE>
<html>
<head>
        <title></title>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    <style>
        label{
            width: 50px;
            height: 25px;
            float: left;
        }
    </style>
    </head>
    <body>
        <span style="float: left" onclick="if(i>0)i--;jump()"><<</span>
        <div id="content" style="float: left;overflow: hidden;width: 400px;height: 25px">
            <div id="checks" style="width: 550px;margin-left: 0px">
                <label><input type="checkbox" />1</label>
                <label><input type="checkbox" />2</label>
                <label><input type="checkbox" />3</label>
                <label><input type="checkbox" />4</label>
                <label><input type="checkbox" />5</label>
                <label><input type="checkbox" />6</label>
                <label><input type="checkbox" />7</label>
                <label><input type="checkbox" />8</label>
                <label><input type="checkbox" />9</label>
                <label><input type="checkbox" />10</label>
                <label><input type="checkbox" />11</label>
            </div>
        </div>
        <span style="float: left" onclick="if(i<max)i++;jump()">>></span>
    </body>

<script>
    var i = 0;
        max = 3;
    function jump(){
        $("#checks").animate({
            marginLeft:-50*i+"px"
        },500);
    }
</script>
    </html>

拿去改改吧