jQuery左右滚动

jQuery左右滚动,jquery中有自定义动画。要实现左右滚动就是将Html标签的left值进行加减。

两个div。

一个div为固定宽度 。在次div中内嵌一个div ，这个为数据列。

<div class=”box”>

<div class=”box-li”>

  <ul>

<li>数据2</li>

<li>数据2</li>

<li>数据2</li>

<li>数据2</li>

<li>数据2</li>

<li>数据2</li>

   <ul>

</div>

<div>

<span id=”next”>向右移动</span>

<span id=”pre”>向左移动</span>

样式表

.box{

   float: left;
    height: 93px;
    width: 560px;
    left:0px;
    white-space:nowrap;
    overflow:hidden;
    position:relative /* 不加此属性在ie7中无法隐藏内容*/

}

.box-li{

float: left;
    height: 90px;
    left:0px;
    position:relative;
    white-space:nowrap;
     clear: both;

}

.box-li ul{

width:100000px; /* 不加此数据IE中数据会自动换行*/
  white-space:nowrap;

}

.box-li li{

  margin-left:0px;
     margin-right:0px;
    float: left;
    text-align:center;
    width: 92px;

}

$(function () {
    var $cur = 1; //初始化显示的版面
    var $i= 6; //每版显示数
    var $len = $('.box-li>ul>li').length; //计算列表总长度(个数)
    var $pagecount = Math.ceil($len / $i); //计算展示版面数量

   var $showbox = $('.box');

    var $w = $('.box').width(); //取得展示区外围宽度
     var $pre = $('#pre');
    var $next = $('#next');
        //向前滚动
    $pre.click(function () {
        if (!$showbox.is(':animated')) {  //判断展示区是否动画
            if ($cur == 1) {   //在第一个版面时,再向前滚动无动作            }
            else {
                $showbox.animate({
                    left: '+=' + $w
                }, 600); //改变left值,切换显示版面
                $cur--; //版面累减
            }
                  }
    });
    //向后滚动
    $next.click(function () {
        if (!$showbox.is(':animated')) { //判断展示区是否动画
            if ($cur == $pagecount) {  //在最后一个版面时,再向后滚动无动作            }
            else {
                $showbox.animate({
                    left: '-=' + $w
                }, 600); //改变left值,切换显示版面
                $cur++; //版面数累加

            }
                  }
    });

});