//点击上一页
$('.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. 几款JS地图插件比较

    因工作需要,最近研究几款关于地图的JS插件,现与大家分享一下. 以下比较只是浅层次的分析一下,并没有实际通过项目检验,所以不足之处还请大家指出. 地图插件对比 插件名  简介 区域支持 扩展性 离线支 ...

  2. WCF 服务调用RFC 出现异常

    我在VS2010的WCF项目用connecter 3.0 调用 RFC  运行到       IDestinationConfiguration ID = new SAPConfig();       ...

  3. 用VisualSVN做项目版本控制

    一.SVN服务端 1.VisualSVN Server下载: http://download.csdn.net/detail/jiminull/4448874 或 http://www.visuals ...

  4. 44、网页启动Activity,网页传值Activity

         在assets新建一个demo.html 文件. <html> <head> <meta http-equiv="Content-Type" ...

  5. C#递归遍历指定目录下文件和文件夹

    #region 使用递归查询某路径中的文件结构 public static void CheckFilePath() { ReadFilePath(); } public static void Re ...

  6. hive 配置mysql元数据库

    在 hive的配置文件hive-site.xml中 <?xml version="1.0"?> <!-- Licensed to the Apache Softw ...

  7. curl命令学习(转载的)

    原文地址: http://www.thegeekstuff.com/2012/04/curl-examples/ curl是网络上常用一个命令,简单来说就是可以上传下载,甚至可以当成下载工具使用,比如 ...

  8. NOIP2014 生活大爆炸版石头剪刀布

    生活大爆炸版石头剪刀布 (rps.cpp/c/pas) [问题描述] 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 ...

  9. 卡特兰数 BZOJ3907 网格 NOIP2003 栈

    卡特兰数 卡特兰数2 卡特兰数:主要是求排列组合问题 1:括号化矩阵连乘,问多少种方案 2:走方格,不能过对角线,问多少种方案 3:凸边型,划分成三角形 4:1到n的序列进栈,有多少种出栈方案 NOI ...

  10. HDU 3289 Cat VS Dog (二分匹配 求 最大独立集)

    题意:每个人有喜欢的猫和不喜欢的狗.留下他喜欢的猫他就高心,否则不高心.问最后最多有几个人高心. 思路:二分图求最大匹配 #include<cstdio> #include<cstr ...