点击左右按钮进行左右切换一次滑动一个li的宽度

最新推荐文章于 2022-08-25 08:50:29 发布

weixin_30687051

最新推荐文章于 2022-08-25 08:50:29 发布

阅读量993

点赞数

CC 4.0 BY-SA版权

文章标签： java

原文链接：http://www.cnblogs.com/yaomengli/p/7417046.html

本文介绍了一个使用jQuery实现的日期切换效果，通过点击左右按钮可以切换显示不同的月份，每次切换都会平滑过渡到下一个日期对应的列表项。

点击左右按钮 进行左右切换 一次滑动一个li的宽度

$(function(){
    var num1=0;
    var num2=0;
$(".timer span").click(function(){
    var index1=$(this).index();
    if(index1==0){
       /* ul往左移动*/

        num1++;

        if(num1>6){

            num1=6;
        }
        $(".timer>ul").animate({marginLeft:-num1*127+"px"});

    }else{
       /* ul往右移动*/

        num1--;
        if(num1<0){
            num1=0
        }
         $(".timer>ul").animate({marginLeft:-num1*127+"px"})

    }
})

<div class="timer">
    <span><</span>
    <ul>
        <li>2017年8月</li>
        <li>2017年7月</li>
        <li>2017年6月</li>
        <li>2017年5月</li>
        <li>2017年4月</li>
        <li>2017年3月</li>
        <li>2017年1月</li>
        <li>2016年12月</li>
        <li>2016年11月</li>
        <li>2016年10月</li>
        <li>2016年9月</li>
        <li>2016年8月</li>
     </ul>
    <span>></span>
</div>