$(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简单实现无缝滚动的更多相关文章

  1. banner轮播无缝滚动 jq代码

    HTML: <div class="box"> <ul> <li>11111</li> <li>22222</li ...

  2. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. jq封装-无缝滚动效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. vue无缝滚动的插件开发填坑分享

    写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...

  5. JavaScript(六)——实现图片上下或者左右无缝滚动

    /*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...

  6. scrollLeft的相关问题(js横向无缝滚动)

    <div id="demo"> <div id="innerdemo"> <div id="demo1"> ...

  7. JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  8. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  9. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. FPGA与MATLAB数据交互高效率验证算法——仿真阶段

    之前博文是对基本设计技巧的总结和一些小设计随笔,内容有点杂,缺乏目的性.本来后续计划设计几个小项目,但导师的任务比较紧,所以为了提高效率,后续博客会涉及到很多算法方面的设计与验证的内容,主要关于OFD ...

  2. UVA-624 CD---01背包+输出路径

    题目链接: https://vjudge.net/problem/UVA-624 题目大意: 这道题给定一个时间上限,然后一个数字N,后面跟着N首歌的时间长度,要我们 求在规定时间w内每首歌都要完整的 ...

  3. 史上最全TensorFlow学习资源汇总

    来源 | 悦动智能(公众号ID:aibbtcom) 本篇文章将为大家总结TensorFlow纯干货学习资源,非常适合新手学习,建议大家收藏. ▌一 .TensorFlow教程资源 1)适合初学者的Te ...

  4. hive-jdbc获取查询日志慢的问题发现与解决

    1.问题描述: 数据平台的临时查询一直有一个问题,就是日志获取太慢了,每次都是和结果一块出来的,这就非常影响用户的体验,半天都没任何输出.另一个是Beeline客户端不一致,beeline客户端每次都 ...

  5. MySQL表的创建

    第1步:设计 首先要设计一张用于我想要用途的表,例如如下用于描述个人的信息类型: 姓名: 性别: 出生日期: 地址: 最喜爱的食物. 下面为他来指定列和数据类型: 列 | 类型 | 允许值 | - | ...

  6. php Redis函数使用总结(string,hash,list, set , sort set )

    对于:string, set , sort set , hash 的增,改操作,是同一个命令,但是把它当改操作时,及时成功返回值依旧为0 对于:list结构来说,增删改查自有一套方法.   <? ...

  7. C#之IComparable用法,实现List<T>.sort()排序

    这篇文章主要介绍了C#的一些基础知识,主要是IComparable用法,实现List<T>.sort()排序,非常的实用,这里推荐给大家.   List<T>.sort()可以 ...

  8. 文件上传详解 (HTML FILE)

    FileUpload 对象 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文 ...

  9. .NET Core 从 Github到 Nuget 持续集成、部署

    一.前言 Nuget 作为一个.NET研发人员,我想你都不会陌生,他为我们提供非常方便的程序包管理,不管是版本,还是包的依赖都能轻松应对,可以说是我们的好助手.而 Nuget 除了官方nuget.or ...

  10. Java面试题—初级(7)

    作为一枚Java后端开发者,数据库知识必不可少,对数据库的掌握熟悉度的考察也是对这个人是否有扎实基本功的考察.特别对于初级开发者,面试可能不会去问框架相关知识,但是绝对不会不去考察数据库知识,这里收集 ...