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

赞 (0)

相关推荐

  • jquery实现图片滚动效果的简单实例

    复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       <title>jquery 图片自动无缝滚动</title>      

  • jquery图片滚动放大代码分享（1）

    jquery图片滚动放大代码分享（1）

    本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,带有左右箭头,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:        ----------------------查看效果下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-e

  • jQuery图片滚动图片的效果(另类实现)

    需求 : 图片切换的时候下一屏不允许出现空白的项,换句话说就是 : 1.当移动的最后一屏移动的个数小于要展示的个数的时候 ,只移动(展示个数-最后一屏的个数的)差值. 举个例子: 每一屏都要展示7个,但总个数才10个,滚动到下一屏时候用户看到的还是7个,这个时候需要移动的是三个 这个效果是基于jQuery写的,只是想纪念下自己的学习 话不多说了,贴代码 复制代码 代码如下: (function( $ ){     var slider = function( elem , args ){    

  • jQuery合作伙伴左右滚动特效

    jQuery合作伙伴左右滚动特效

    本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考.具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止自动滚动,鼠标离开自动滚动,点击左右按钮左右滚动Logo切换网页特效.可用于网站底部作为合作伙伴展示或友链展示的特效,是一款非常优秀的特效源码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行

  • jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

    jquery左右滚动焦点图banner图片,鼠标经过显示上下页 适合宽和高都比较大的页面使用  演示 复制代码 代码如下: <div class="bannerbox"> <div id="focus"> <ul> <li><a href="http://www.freejs.net/" target="_blank"> <img src="../da

  • 基于jQuery的可以控制左右滚动及自动滚动效果的代码

    分享一个控制左右滚动及自动滚动的样例, 昨晚花了两个多小时, 忍受着悍蚊的叮咬, 汗水的侵袭, 一行行的敲出来的血汗代码. 哈哈. 封装了两种模式: 点击滚动版本DEMO 自动滚动版本DEMO,源码中有详细注释. 思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展示区块left值实现切换. 1.向前(左):当在第一个版面时,滚动到最后一个页面,否则,累加left值,向前滚动; 2.向后(右):当在最后一个版面时,滚动到第一个页面,否则,累减left值,向后滚动;

  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio

  • 基于jquery可配置循环左右滚动例子

    基于jquery可配置循环左右滚动例子

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>可配置横栏滚动De

  • jQuery bxCarousel实现图片滚动切换效果示例代码

    BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 controls:是否

  • jQuery实现公告文字左右滚动的实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • Jquery图片滚动与幻灯片的实例代码

    1.图片滚动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>&l

  • 一个jquery实现的不错的多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

  • JQuery 图片滚动轮播示例代码

    完整的项目在附件中 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>图片切换</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" > va

  • 基于Jquery实现的一个图片滚动切换

    首先还是要引用jquery框架的. 然后开始HTML代码: 复制代码 代码如下: <div id="New_zlMimgMv"> <div class="imgMvBox"> <ul id="imgMvCon"> <li><a href="#" title=""><img src="New_zlimgMv.jpg" alt

随机推荐