基于jQuery的左右滚动实现代码


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



相关阅读:
用vbs实现的确定共享文件夹的本地路径?
CSS外部引用使用link与import的区别
Windows7下PHP开发环境安装配置图文方法
控件开发时两种JS嵌入资源方式的使用方法
用JSP从数据库中读取图片并显示在网页上
用ASP.Net写一个发送ICQ信息的程序
JS模仿MSN右下角弹出提示框代码
VBS教程:正则表达式简介 -定位符
Linux下清空用户登录记录和命令历史的方法分享
php smarty模版引擎中变量操作符及使用方法
php 数组的合并、拆分、区别取值函数集
新手学堂:Linux操作系统Shell基础知识
匹配html标记的正则
异构功能实现oracle查询mysql
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4