//点击上一页
$('.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. Zen Coding support in WebStorm/PhpStorm

    With the last WebStorm/PhpStorm EAP you can edit HTML and CSS code really fast usingZen Coding featu ...

  2. 剑指Offer:二进制中1的个数

    题目:输入一个整数,输出该数二进制表示中1的个数. // 二进制中1的个数 #include <stdio.h> int wrong_count_1_bits(int n) // 错误解法 ...

  3. 多线程程序设计学习(6)Producer-Consumer模式

    Producer-Consumer[生产消费者模式]一:Producer-Consumer pattern的参与者--->产品(蛋糕)--->通道(传递蛋糕的桌子)--->生产者线程 ...

  4. 【转】Effective-Objective-C-读书笔记-Item-4-如何正确定义常量 -- 不错

    原文网址:http://tutuge.me/2015/03/11/Effective-Objective-C-%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0-Item-4-% ...

  5. 什么是MBeanServer

    什么是MBeanServer MBeanServer是一个包含所有注册MBean的仓库.它是JMX代理层的核心.JMX1.0规范提供一个接口叫 javax.management.MBeanServer ...

  6. javascript-实现日期大写

    <script language="javascript"> $(document).ready(function() { //定义中文数组 var chinese = ...

  7. Poj 1953 World Cup Noise之解题报告

    World Cup Noise Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16369   Accepted: 8095 ...

  8. Poj 1163 The Triangle 之解题报告

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 42232   Accepted: 25527 Description 7 3 ...

  9. MFC常用类

    CString CStringT 操作可变长度字符串的模板类CStringT有三个实例:CString.CStringA和CStringW,它们分别提供对TCHAR.char和wchar_t字符类型的 ...

  10. TCP 3次握手和四次挥手

    1.标示符说明    位码即tcp标志位: SYN(synchronous建立联机)   ACK(acknowledgement 确认)  PSH(push传送)    FIN(finish结束)   ...