两个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的可以控制左右滚动及自动滚动效果的代码
- 基于jquery可配置循环左右滚动例子
- 基于Jquery实现的一个图片滚动切换
- Jquery图片滚动与幻灯片的实例代码
- jQuery bxCarousel实现图片滚动切换效果示例代码
- jQuery图片滚动图片的效果(另类实现)
- jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
- jQuery实现公告文字左右滚动的实例代码
- jquery实现图片滚动效果的简单实例
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- JQuery 图片滚动轮播示例代码
- 一个jquery实现的不错的多行文字图片滚动效果
- jquery图片滚动放大代码分享（1）
- jQuery合作伙伴左右滚动特效
