//点击上一页
$('.pointLeft').click(function() {
if (prevAllow) {
prevAllow = false;
scrollUlLeft = scrollUlLeft - scrollUlWidth;
$('#Pointimg').css('left', scrollUlLeft);
//复制最后一个 li 并插入到 ul 的最前面
$('#Pointimg li:last').clone().prependTo('.scroll_ul');
//删除最后一个 li
$('#Pointimg li:last').remove();
$('#Pointimg').animate({
left : scrollUlLeft + scrollUlWidth
}, 300, function() {
scrollUlLeft = parseInt($('.scroll_ul').css('left'), 10);
prevAllow = true;
})
}
});

//点击下一页
$('.pointRight').click(function() {
if (nextAllow) {
nextAllow = false;
$('#Pointimg').animate({
left : scrollUlLeft - scrollUlWidth
}, 300, function() {
scrollUlLeft = parseInt($('#Pointimg').css('left'), 10);
scrollUlLeft = scrollUlLeft + scrollUlWidth;
$('#Pointimg').css('left', scrollUlLeft);
//复制第一个 li 并插入到 ul 的最后面
$('#Pointimg li:first').clone().appendTo('#Pointimg');
//删除第一个 li
$('#Pointimg li:first').remove();
nextAllow = true;
})
}
});

$(function() {
//配置变量
var config = {
showNum :4 , //设置滚动的显示个数
autoScroll : true, //是否自动滚动,默认为 false
autoScrollInterval : 3000 //自动滚动间隔,默认为 3000 毫秒,autoScroll = true 时才有效
}

var scrollUlWidth = $('#Pointimg li').outerWidth(true), //单个 li 的宽度
scrollUlLeft = 0, //.scroll_ul 初使化时的 left 值为 0
prevAllow = true, //为了防止连续点击上一页按钮
nextAllow = true; //为了防止连续点击下一页按钮

//计算父容量限宽
$('#PointimgBox').width(config.showNum * scrollUlWidth);

//自动滚动
if (config.autoScroll) {
setInterval(function() {
$('.pointRight').trigger('click');
}, config.autoScrollInterval)
}
})

jquery实现无缝滚动的更多相关文章

  1. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  5. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  6. 基于JQuery打造无缝滚动新闻

    JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...

  7. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  8. jQuery kxbdMarquee 无缝滚动

    转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...

  9. liMarquee – jQuery无缝滚动插件(制作跑马灯效果)

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

随机推荐

  1. vim 退出保留显示的内容

    /*************************************************************************** * vim 退出保留显示的内容 * 声明: * ...

  2. jquery通过ajax获取数据(优化、封装)

    下载页面查看: makeGrid.js   ,column.js  ,XiangMuGuanLi.aspx <div class="tb_container" id=&quo ...

  3. system CPU占用率过高与91助手的关系

    今天正在认真工作,忽然发现电脑越来越慢. 按 CTRL+ALT+DEL打开任务管理器看了下CPU使用率.其中system占用率居然达到了64%.不对劲儿,按照平时习惯,system根本占用了不要这么多 ...

  4. Simple XML

    官网:http://simple.sourceforge.net/home.php 截止目前最新版本:simple-xml-2.7.1.jar 特点: jar lib文件只有360K左右的大小 它的使 ...

  5. Myeclipse *.link用法

    引用路径 path=D:\\ProgramData\\MyEclipse\\adt

  6. 黑盒测试用例设计方法&理论结合实际 -> 边界值分析法

    一. 概念 边界值分析法就是对输入或输出的边界值进行测试的一种黑盒测试方法.通常边界值分析法是作为对等价类划分法的补充,这种情况下,其测试用例来自等价类的边界. 二. 边界值分析法的应用 根据大量的测 ...

  7. 《GettingThingsDone》--GTD学习笔记(三)-GTD的三个关键原则

    原则一:养成收集的习惯 1.收集习惯给个人带来的好处     在收集过程中你会出现焦虑和解脱,难以招架和控制良好的情绪. (1)消极情绪的来源     要做的事情总比你能做的事情多,要做的事情太多并不 ...

  8. leetcode@ [174] Dungeon Game (Dynamic Programming)

    https://leetcode.com/problems/dungeon-game/ The demons had captured the princess (P) and imprisoned ...

  9. Windows命令行使用FTP

    1.系统环境 FTP客户端:Windows7旗舰版,管理员权限命令行: FTP服务端:CentOS 6.5,VSFTP,端口 21(默认) 2.登陆FTP 在命令行下输入 ftp,出现 ftp> ...

  10. linux oracle10g安装

    同样适合11g哦,亲; 一.安装系统 首先安装Linux系统,根据Oracle官方文档的建议,在机器内存小于1G的情况下,swap分区大小应该设置为内存的2倍大,若内存大于2G则swap分区设置为与内 ...