jquery实现无缝滚动
//点击上一页
$('.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实现无缝滚动的更多相关文章
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 一款经典的jQuery kxbdMarquee 无缝滚动插件
<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...
- 基于JQuery打造无缝滚动新闻
JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- jQuery kxbdMarquee 无缝滚动
转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- RPi 2B SD read-only filesytem
/**************************************************************************** * RPi 2B SD read-only ...
- NK 1137: 石子合并问题
1137: 石子合并问题 Time Limit: 1500 ms Memory Limit: 10000 kB Judge type: Multi-cases Total Submit ...
- WCF:为 SharePoint 2010 Business Connectivity Services 构建 WCF Web 服务(第 1 部分,共 4 部分)
转:http://msdn.microsoft.com/zh-cn/library/gg318615.aspx 摘要:通过此系列文章(共四部分)了解如何在 Microsoft SharePoint F ...
- WCF学习笔记(二):简单调用
转:http://www.cnblogs.com/wengyuli/archive/2009/11/08/1598428.html 一个通信会话过程有两个部分组成,客户端和服务端,他们要进行会话就必然 ...
- 再见WCF
转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...
- SGU 390-Tickets(数位dp)
题意:有标号l-r的票,要给路人发,当给的票的编号的各数位的总和(可能一个人多张票)不小k时,才开始发给下一个人,求能发多少人. 分析:这个题挺难想的,参考了一下题解,dp[i][sum][left] ...
- Codeforces 628E Zbazi in Zeydabad 树状数组
题意:一个n*m的矩阵,要么是 . 要么是 z ,问可以形成几个大z 分析:(直接奉上官方题解,我感觉说的实在是太好了) Let's precalculate the values zlij, zri ...
- hadoop hdfs的java操作
访问hdfs上的文件并写出到输出台 /** * 访问hdfs上的文件并写出到输出台 * @param args */ public static void main(String[] args) { ...
- Spark常用RDD操作总结
aggregate 函数原型:aggregate(zeroValue, seqOp, combOp) seqOp相当于Map combOp相当于Reduce zeroValue是seqOp每一个par ...
- ubuntu 运行android sdk 下的工具adb报bash: ./adb: No such file or directory
运行adb出现这种错误: bash: ./adb: No such file or directory 但adb确实存在. 可能1:你用的是64位的Linux,没装32位运行时库,安装 $ sud ...