JQ简单实现无缝滚动
$(function(){
$("ul li:lt(5)").clone().appendTo("ul");
var $width = $("ul li:lt(5)").width() * 4;
var currIndex = 0;
$("#next").click(function(){
if(currIndex == 2){
currIndex = 0;
$("ul").css("left",0);
}
currIndex++;
$("ul").stop().animate({left:$width * currIndex * -1},500);
});
$("#prev").click(function(){
if(currIndex == 0){
currIndex = 2;
$("ul").css("left",2 * $width * -1);
}
currIndex--;
$("ul").stop().animate({left:$width * currIndex * -1},500);
});
$("ul>li").hover(function(){
$(this).children().eq(1).stop().animate({top:0},400);
},function(){
$(this).children().eq(1).stop().animate({top:240},400);
});
});
JQ简单实现无缝滚动的更多相关文章
- banner轮播无缝滚动 jq代码
HTML: <div class="box"> <ul> <li>11111</li> <li>22222</li ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue无缝滚动的插件开发填坑分享
写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...
- JavaScript(六)——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
- scrollLeft的相关问题(js横向无缝滚动)
<div id="demo"> <div id="innerdemo"> <div id="demo1"> ...
- JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Apache Flink 分布式执行
Flink 的分布式执行过程包含两个重要的角色,master 和 worker,参与 Flink 程序执行的有多个进程,包括 Job Manager,Task Manager 以及 Job Clien ...
- Struts(九):值栈(OGNL)
引言 在我们开发过程中,往往会使用一个对像传递到一个具体的action中,之后到跳转页面中访问对应对象的具体的参数. 比如:我们搭建一个struts2项目: 回顾下如何搭建strut2: 1.下载的s ...
- Packer piplines and workflow
packer对docker和aws AMI的支持都很好,来上个图: 配套的模版长这样: { "variables": { "name": "webim ...
- 使用 Docker 一步搞定 ZooKeeper 集群的搭建
背景 原来学习 ZK 时, 我是在本地搭建的伪集群, 虽然说使用起来没有什么问题, 但是总感觉部署起来有点麻烦. 刚好我发现了 ZK 已经有了 Docker 的镜像了, 于是就尝试了一下, 发现真是爽 ...
- CSS3中不常用但很有用的属性-1
内容来源于W3Cschool和<图解CSS3核心技术与案例实战> 1.:target选择器 URL 带有后面跟有锚名称 #,指向文档内某个具体的元素.这个被链接的元素就是目标元素(targ ...
- sumo快速运行简单仿真实例详细教程
本文旨在让大家快速的了解sumo,并给出运行一个简单的sumo的例子的教程,进而了解基本sumo工程的架构,使大家对该软件产生兴趣并持续学习下去,刚开始学习仿真的确枯燥,项目"跑起来&quo ...
- UEditor Golang上传图片与附件
UEditor图片与附件上传官方只支持ASP.ASP.NET.JSP.PHP四种语言版本,Golang就不在其中.因为自己开发系统的需要,我照着UEditor服务器端的接口自己实现了一个Golang版 ...
- Java多线程之interrupt()的深度研究
近期学习Java多线程的中断机制,网上的帖子说得很浅,并没深究其原理.看了Java源码,对Java的中断机制有了略深入的理解,在这篇文章中向感兴趣的网友分享下.这篇文章主要通过一个典型例子对中断机制进 ...
- js 的作用域 域解析 分析
作用域链 函数每次执行时,浏览器都会在函数中开启一个地方用来存储函数内的局部数据.(声明在函数内的局部变量),这个地方就叫做作用域([scopes]) 作用域链 变量与函数的查找规则:当我们在 ...
- [Codeforces 946G]Almost Increasing Array
Description 题库链接 给你一个长度为 \(n\) 的序列 \(A\) .现在准许你删除任意一个数,删除之后需要修改最小的次数使序列单调递增.问最小次数. \(1\leq n\leq 200 ...