//点击上一页
$('.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. 【转】Java 截取字符串

    原文网址:http://blog.csdn.net/yelangjueqi/article/details/9149699 截取字符串常用方法: 1.length() 字符串的长度 例:char ch ...

  2. 【转】android的消息处理机制(图+源码分析)——Looper,Handler,Message

    原文地址:http://www.cnblogs.com/codingmyworld/archive/2011/09/12/2174255.html#!comments 作为一个大三的预备程序员,我学习 ...

  3. (四)学习CSS之position、bottom、left、right和top属性

    参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position 属性规定元素的定位类型. 这个属性定义建立元素布局所用的定位机制 ...

  4. JMX-JAVA进程监控利器

    Java 管理扩展(Java Management Extension,JMX)是从jdk1.4开始的,但从1.5时才加到jdk里面,并把API放到java.lang.management包里面. 如 ...

  5. bug描述注意点

    一个好的错误跟踪系统包括了错误的必要信息,如果做得不好,会造成迷惑,并误导读者.好的故障描述应该包括十个基本部分:标题.项目.所属模块.优先级.重要性.异常等级.可重复性.现象.操作过程和附件. ①标 ...

  6. uva 2572 Viva Confetti

    思路: 小圆面是由小圆弧围成.那么找出每条小圆弧,如果小圆弧,在小圆弧中点上下左右进行微小位移的所得的点一定在一个小圆面内. 找到最后覆盖这个小点的圆一定是可见的. 圆上的点按照相邻依次排序的关键量为 ...

  7. 44 个 JavaScript 变态题解析

    当初笔者做这套题的时候不仅怀疑智商, 连人生都开始怀疑了…. 不过, 对于基础知识的理解是深入编程的前提. 让我们一起来看看这些变态题到底变态不变态吧! 第1题 ["1", &qu ...

  8. Fragment回调顺序及getActivity()为NullPointerException解决方法

    Fragment回调顺序 onAttach->onCreate->onCreateView->onActivityCreated ps:最后发现经常在Fragment里面getAct ...

  9. python 安装第三方模块

    在Python中,安装第三方模块,是通过setuptools这个工具完成的. 如果你正在使用Mac或Linux,安装setuptools本身这个步骤就可以跳过了. 如果你正在使用Windows,请首先 ...

  10. _doPostBack用法总结

    转载在以下两篇博客: http://www.cnblogs.com/yongtaiyu/archive/2011/05/13/2045746.html http://www.cnblogs.com/F ...