$(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. 基于JWT标准的用户认证接口实现

    前面的话 实现用户登录认证的方式常见的有两种:一种是基于 cookie 的认证,另外一种是基于 token 的认证 .本文以基于cookie的认证为参照,详细介绍JWT标准,并实现基于该标签的用户认证 ...

  2. Java:Java 中会存在内存泄漏吗

    理论上Java因为有垃圾回收机制(GC)不会存在内存泄露问题(这也是Java被广泛使用于服务器端编程的一个重要原因):然而在实际开发中,可能会存在无用但可达的对象,这些对象不能被GC回收,因此也会导致 ...

  3. Java集合总结【面试题+脑图】,将知识点一网打尽!

    前言 声明,本文用的是jdk1.8 花了一个星期,把Java容器核心的知识过了一遍,感觉集合已经无所畏惧了!!(哈哈哈....),现在来总结一下吧~~ 回顾目录: Collection总览 List集 ...

  4. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  5. [SCOI 2009]windy数

    Description 题库链接 找出在 \([A,B]\) 间满足相邻位差值至少为 \(2\) 的正整数个数. \(1\leq A,B\leq 2\cdot 10^9\) Solution 数位 \ ...

  6. [ZJOI2007]报表统计

    题目描述 Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一. 经过仔细观察,小Q发现统计一张报表实际上是维护一个非负整数数列,并 ...

  7. 51nod 1752 哈希统计

    Description Solution 考虑用倍增来处理答案: 设 \(f[i][j]\) 表示长度恰好为 \(2^{i}\) 的哈希值为 \(j\) 的字符串的种数 \(dp[i][j]\) 表示 ...

  8. [Educational Codeforces Round 7]F. The Sum of the k-th Powers

    FallDream dalao找的插值练习题 题目大意:给定n,k,求Σi^k (i=1~n),对1e9+7取模.(n<=10^9,k<=10^6) 思路:令f(n)=Σi^k (i=1~ ...

  9. hdu 5533(几何水)

    Input The first line contains a integer T indicating the total number of test cases. Each test case ...

  10. day4 liaoxuefeng---模块

    一.模块 二.常用内建模块 三.常用第三方模块