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 元素,包括文字.图像.表格.表单等元素 ...
随机推荐
- erlang判断语法结构:if/case/guard
erlang 有好几种常用的判断结构语句,如 if.case.guard 等.文章将分别对 if / case /guard 的特点做介绍,以及用例说明 1.if 结构 if Condition 1 ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 《深入Java虚拟机学习笔记》- 第10章 栈和局部变量操作
Java栈和局部变量操作 Java虚拟机是基于栈的机器,几乎所有Java虚拟机的指令都与操作数栈相关.栈操作包括把常量压入操作数栈.执行通用的栈操作.在操作数栈和局部变量之间往返传输值. 1常量入栈操 ...
- HDU 4614-Vases and Flowers(线段树区间更新)
题意: n个花瓶(0-n-1) 现有两个操作, 操作1 给a,f 从a位置开始向后连续插f个花(一个花瓶插一个)若当前花瓶有花则向后找,直到n-1位置如果还有多余的花则丢掉求查完花的第一和最后一个位置 ...
- POJ 1904 King's Quest 强连通分量+二分图增广判定
http://www.cnblogs.com/zxndgv/archive/2011/08/06/2129333.html 这位神说的很好 #include <iostream> #inc ...
- Ubuntu 14.04 设置静态IP
使用Network Manager UI界面中指定 手动时,无法保存. 通过修改配置文件解决来此问题.记录以下. 如果输入过密码后,就会出现在这个目录下面, 以如下chinaNet为例 gaojing ...
- 设计原则 Design Principle
Design Principle设计原则 最近由于碰到要参与设计一个音频处理系统,有人提议用一个大的全局变量结构体来做状态信息交流的地方,引起了我对设计一个系统的思考,于是找到了如下资料,当然,关于这 ...
- Storm入门
Storm框架入门 1 Topology构成 和同样是计算框架的Mapreduce相比,Mapreduce集群上运行的是Job,而Storm集群上运行的是Topology.但是Job在运行结束之后会自 ...
- 【数论】Baby Step Giant Step
被数论怒虐了一天 心力憔悴啊 感觉脑细胞已经快消耗殆尽了>_< 但是今天还是会了很多之前觉得特别神的东西 比如BSGS 之前听了两遍 好像都因为听得睡着了没听懂-.- 今天终于硬着头皮学会 ...
- Fragment回调顺序及getActivity()为NullPointerException解决方法
Fragment回调顺序 onAttach->onCreate->onCreateView->onActivityCreated ps:最后发现经常在Fragment里面getAct ...