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/ ...
随机推荐
- JavaScript中的 原型 property 构造函数 和实例对象之间的关系
1 为什么要使用原型? /* * javascript当中 原型 prototype 对象 * * */ //首先引入 prototype的意义,为什么要使用这个对象 //先来写一个构造函数的面向对象 ...
- LinkedHashMap就这么简单【源码剖析】
前言 声明,本文用得是jdk1.8 前面已经讲了Collection的总览和剖析List集合以及散列表.Map集合.红黑树还有HashMap基础了: Collection总览 List集合就这么简单[ ...
- Java 高级开发必修知识---反射
Class类的使用 1) 在面向对象的世界里,万事万物皆对象 A. Java语言中,普通数据类型,静态成员不是对象,其他皆对象 B. 每一个类也是对象 C. 类是java.lang.Class类的实例 ...
- spark2.1:rdd.combineByKeyWithClassTag的用法示例
测试spark版本: Spark context Web UI available at http://192.168.1.1:32735 Spark context available as 'sc ...
- ipv4与ipv6的区别
对于计算机网络有一定了解的园园们来说,对这两个概念应该比较熟悉,我也将我知道的一点点小知识分享给大家吧 1.协议使用的广泛程度不同 目前,ipv4得到了广泛的应用,基本上所以的与上网有关的(看电影,玩 ...
- JS随机数不重复
方法一 思路:首先创建一个1到3000的数组,每次取一个数,然后去除数组中取出的这个数, 这样就可以实现永不重复. var count=3000; var originalArray=new Arra ...
- [LeetCode] Largest Palindrome Product 最大回文串乘积
Find the largest palindrome made from the product of two n-digit numbers. Since the result could be ...
- xcode7,AFN不能使用的问题
今天手贱立刻升级了Xcode7,结果AFN报错,且不能用了,解决办法如下 第一步:升级AFN到2.6.0 完成之后,运行,结果请求都失败,提示 The resource could not be lo ...
- LoadRunner菜鸟入门学习笔记
一.LR版本及浏览器选择 1.首先百度了一下LR各版本的浏览器兼容性 8.0 最高ie6 8.1 最高ie6 9.0 最高ie7 9.5 最高ie8 11.0 最高ie9( win7 32位+LR11 ...
- 实验吧_貌似有点难(php代码审计)&头有点大
二话不说先贴代码 <?php function GetIP(){ if(!empty($_SERVER["HTTP_CLIENT_IP"])) $cip = $_SERVER ...