两个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++; //版面数累加 } } }); });

　　推荐阅读

　　jquery ui dialog ie8出现滚动条的解决方法

此问题在UI1.7就出现,到了UI1.8也未修复,真不知道该怎么说好.. JQUI 开发提交BUG的帖子:http://dev.jqueryui.com/ticket/3623 解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵 附>>>详细阅读

本文标题：基于jQuery的左右滚动实现代码

地址：http://www.17bianji.com/kaifa2/JS/25275.html

 1/2    1