点击按钮等实现li标签的左右横向移动+动画

效果图：

点击按钮等实现li标签的左右横向移动,这里限制每个li的宽度一样

 

 代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>点击按钮等实现li标签的左右横向移动,这里限制每个li的宽度一样</title>
        <style></style>
    </head>
    <body>
        <button type="button" id="moveleft"><</button>
        <div class="timer" id="maincontent" style="width: 1000px; background: yellow; overflow: hidden;display: inline-block;">
            <ul id="testUl" style="white-space:nowrap;padding-left: 0;">
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年8月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年7月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年6月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年5月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年4月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年3月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年1月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2016年9月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2016年8月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年q月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年w月</button></li>
                <li style="display: inline-block; margin: auto 25px;"><button type="button">2017年e月</button></li>
            </ul>
        </div>
        <button type="button" id="moveright">></button>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            //这里li的左右滚动demo限制每个li的宽度一样,每次移动一个li的宽度包含间距
            //ul标签下的li数量
            var lengli = $("#testUl li").length;
            console.log(lengli);
            
            //所有li的总宽度包含间距
            var sumWidth =0;
            $("ul").find("li").each(function(){
            sumWidth += ($(this).width()+50);
            });
            console.log(sumWidth);

            //每个li加间距的宽度
            var liWidth = 79.73+50;
            var count =(sumWidth-$("#maincontent").width())/liWidth
            if(count%1 >0){
                count = parseInt(count)+1
            }
            console.log(count);
        
            var num = 0;
            $("#moveleft").click(function() {
                var scrleft = $("#maincontent").scrollLeft();

                if(num<count){
                    //alert("当前到左侧距离："+scrleft+"；div总宽度："+$("#maincontent").width()+"可左移次数："+count);
                    num++;
                    $("#maincontent").animate({
                        scrollLeft: (liWidth * num)
                    }, 500);
                }
                
            })


            $("#moveright").click(function() {
                if(num >0){
                    alert(1);
                    num--;
                    $("#maincontent").animate({
                        scrollLeft: (129.73 * num)
                    }, 500);
                }
                
            })
        </script>
    </body>

</html>

 

posted @ 2020-12-01 14:14  逸凨  阅读(1375)  评论(0)  编辑  收藏  举报