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/ ...
随机推荐
- NHibernate的基本使用
一.O/R Mapping 概论 工厂模式+反射+每个数据库的DAL层来解决数据访问层的代码 针对数据库表中字段的变化我们是无法预料的,所以每一次用户需求的修改都会直接导致我们程序员来修改—实体类(B ...
- Java基础中一些容易被忽视的语法小细节总结
一:语法细节 1. Java中的命名规则: package:统一使用小写字母 class:首字母大写,使用驼峰标识 method:首字母小写,使用驼峰标识 field:首字母小写,使用驼峰标识 sta ...
- python github
git 1. 版本控制 是否依稀记得你的毕业论文? 1 2 3 4 5 6 7 8 9 10 11 毕业论文_初稿.doc 毕业论文_修改1.doc 毕业论文_修改2.doc 毕业论文_修改3.doc ...
- 面向对象进阶---attr家族
一. isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查obj是否是类 cls 的对象 class Foo: pass ob ...
- Linux:crontab组件部署linux定时任务
crontab简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务 工具,并且会自动启动c ...
- [论文阅读] ImageNet Classification with Deep Convolutional Neural Networks(传说中的AlexNet)
这篇文章使用的AlexNet网络,在2012年的ImageNet(ILSVRC-2012)竞赛中获得第一名,top-5的测试误差为15.3%,相比于第二名26.2%的误差降低了不少. 本文的创新点: ...
- selenium用法详解
selenium用法详解 selenium主要是用来做自动化测试,支持多种浏览器,爬虫中主要用来解决JavaScript渲染问题. 模拟浏览器进行网页加载,当requests,urllib无法正常获取 ...
- 给工作添点乐趣--- 为Idea编译时打印图案
控制台输出图案--banner 之前用vs开发时,也可以自己设置编译时控制台打印出的图案,我们管它叫banner. 给idea设置banner 先见一下效果图 还有重磅的 好了.其实设置这个很简单.分 ...
- docker 安装与学习
本文在CentsOS下安装Docker 1.安装前准备工作 系统要求: 在CentOS下需要64位的CentsOS 7 OS requirements To install Docker, you ...
- Dev GridControl GridView常用属性
1.隐藏最上面的GroupPanel: gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值: sValue=Table.Rows[g ...