基于jQuery的左右滚动实现代码
基于jQuery的左右滚动实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:两个div。一个div为固定宽度。在次div中内嵌一个div,这个为数据列。复制代码代码如下:数据2数据2数据2数据2数据2数据2向右移动向...

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

}

}

});

});

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类