$(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. NHibernate与IbatisNet的简单比较

    NHibernate是当前最流行的Java O/R mapping框架Hibernate的移植版本,当前版本是1.0 rc-1.它出身于sf.net..IbatisNet是另外一种优秀的Java O/ ...

  2. 配置Android开发环境遇到的问题

    1.给Eclipse设置android的SDK位置时,出现这个:This Android SDK requires Andr...ate ADT to the latest 一个升级ADT到指定版本或 ...

  3. 归档(NSKeyedArchiver)的使用

    归档的使用,是归于使用保存数据,但是一些简单的数据,如数组,字典等基本的数据类型,往往不使用在归档中,归档和plist以及UserDefaults最大的区别就在于,前者可以存放自定义的数据类型,而后两 ...

  4. hdu1789 Doing Homework again---(经典贪心)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1789 题目大意: 给出N个作业的截至日期,和N个作业不交所扣掉的分数,要求输出扣除分数做少的方案. ...

  5. 卷积神经网络的一些经典网络2(Inception)

    在架构内容设计方面,其中一个比较有帮助的想法是使用1x1卷积.1x1卷积能做什么? 对于6x6x1的通道的图片来说,1x1卷积效果不佳,如果是一张6x6x32的图片,那么使用1x1卷积核进行卷积效果更 ...

  6. flask开发表单

    from flask import Flask from flask import render_template from flask import request from flask impor ...

  7. Apache Spark Jobs 性能调优

    当你开始编写 Apache Spark 代码或者浏览公开的 API 的时候,你会遇到各种各样术语,比如transformation,action,RDD(resilient distributed d ...

  8. 20 个 Laravel Eloquent 必备的实用技巧

    Eloquent ORM 看起来是一个简单的机制,但是在底层,有很多半隐藏的函数和鲜为人知的方式来实现更多功能.在这篇文章中,我将演示几个小技巧. 1. 递增和递减 要代替以下实现: $article ...

  9. [LeetCode] Maximum Swap 最大置换

    Given a non-negative integer, you could swap two digits at most once to get the maximum valued numbe ...

  10. Struts2--二次提交

    在Struts2中,使用token的方式来防止二次提交.并且在默认的拦截器栈中提供了两个默认拦截器Token Interceptor和Token Session Interceptor.必须要在for ...