js上一个下一个左右滚动实现

最新推荐文章于 2023-07-10 12:20:43 发布

我家小宝_朱朱

最新推荐文章于 2023-07-10 12:20:43 发布

阅读量733

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zhuchunyan_aijia/article/details/51306463

版权

js 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

.outerdiv {
        width: 100%;

    }
    .innerdiv{
        white-space: nowrap;
        width:70px;
        height: 70px;
        border:1px solid green;
        overflow: hidden;
        float:left;

    }
    .outerdiv ul {
        width: 1000px;
    }
    .outerdiv ul li {
        white-space: nowrap;
        font-size: 14px;
        float:left;


    }

    .outerdiv ul li {
        width: 50px;
        height: 50px;
        margin: 10px 10px ;

    }
    .outerdiv ul li:nth-child(2n) {
        background-color: red;

    }
    .outerdiv ul li:nth-child(2n+1){
        background-color: cornflowerblue;

    }
    .outerdiv ul li:last-child{
        background-color: transparent;
    }
    .leftdiv{
        height:70px;
        float: left;
       margin-right: 50px;
    }
    .rightdiv{
        height: 70px;
        float: left;
       margin-left:50px;
    }
    .centerdiv{
        height: 70px;
        width: 600px;
        margin: 30px auto;
    }
</style>
</head>
<body>
<div class="outerdiv">
    <div class="centerdiv">
        <div class="leftdiv">
            <input type="button" name="pre" value="pre">
        </div>
        <div class="innerdiv">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li></li>
            </ul>
        </div>
        <div class="rightdiv">
            <input type="button" name="next" value="next">
        </div>

    </div>

</div>

<script src="../js/libs/jquery-1.11.3.js">
</script>
<script src="../js/libs/jquery.almvalidate.js"></script>

<script>
    var scrollWidth = $("div.innerdiv").get(0).scrollWidth;
    $("[name=pre]").bind("click",function(){
        //多增加li 错位处理
        var  left = $("div.innerdiv").get(0).scrollLeft;
        var width = $("div.innerdiv").width();
        var scrollWidth = $("div.innerdiv").get(0).scrollWidth-width;

        if(left + width >= scrollWidth){
            $("div.innerdiv").animate({"scrollLeft":0},500);
        }else{
            $("div.innerdiv").animate({"scrollLeft":left+width},500);
        }
    });

    $("[name=next]").bind("click",function(){
        var  left = $("div.innerdiv").get(0).scrollLeft;
        var width = $("div.innerdiv").width();
        var maxLeft = $("div.innerdiv").get(0).scrollWidth - width*2;
        var justLeft = maxLeft+10; //10 是margin值

        if(left == 0){
            $("div.innerdiv").animate({"scrollLeft":justLeft},500);
        }else{
            $("div.innerdiv").animate({"scrollLeft":left-width},500);
        }


    });
</script>

我家小宝_朱朱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js上一个下一个左右滚动实现

.outerdiv { width: 100%; } .innerdiv{ white-space: nowrap; width:70px; height: 70px; border:1px solid green; overflow: hidden; float:le
复制链接

扫一扫

专栏目录