上下切换js
<div class="wview">
<span class="prevs" id="prevs-j"></span> <ul class="JQ-slide-content" id="slide-j">
<li>
<a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a>
<li>
<a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3333D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> <a href="#"><img src="temp/id01.jpg" alt="3D坦克极速冰风暴">3D坦克极速冰风暴<i></i></a> </ul> <span class="nexts" id="nexts-j"></span>
</div>
$("#prevs-j").click(function(){
var wrap = $("#slide-j"),
h = wrap.height(),
lis = wrap.find('li').first();
if(!lis.is(":animated")){
lis.animate({'margin-top':'-'+ h + 'px'},1000,function(){
lis.css('margin-top',0).appendTo(wrap);
});
}
});
$("#nexts-j").click(function(){
var wrap = $("#slide-j"),
h = wrap.height(),
lis = wrap.find('li').last();
lis.css('margin-top','-'+ h + 'px').prependTo(wrap);
if(!lis.is(":animated")){
lis.animate({'margin-top':0},1000);
}
});
上下切换js的更多相关文章
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
- bootstrap 标签页tab切换js(含报错原因)
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
- [javascript]switchTab:仿腾讯首页Tab栏切换js插件
腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...
- 标签切换JS代码
//标签切换 var nav = $('.index-nav'); var content = $('.index-nav-content li'); function hoverNav ($eleA ...
- tab选项卡切换(js原生、jQuery )
思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DO ...
- html 原生tab切换js
$("#ulId li").on('click', function () { $("#li-container").children().hide(); $( ...
- jquery封装的图片切换js
原文发布时间为:2010-10-09 -- 来源于本人的百度文章 [由搬家工具导入] http://jquery.malsup.com/cycle/browser.html
- 点击切换JS
$(function(){ var tabnav = $("#tab-nav ul li"); tabnav.click(function(){ $(this).addClass( ...
- weui 多网页切换效果分析
weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...
随机推荐
- CentOS7安装Tomcat8.X
安装说明 安装环境:CentOS7安装方式:源码安装软件:apache-tomcat-8.0.30.tar.gz下载地址:http://tomcat.apache.org/download-80.cg ...
- Matlab中plot、fplot、ezplot的使用方法和区别
函数plot 是绘制二维图形的最基本函数,它是针对向量或矩阵的列来绘制曲线的.也就是说,使用plot 函数之前,必须首先定义好曲线上每一点的x 及y 坐标; 常用格式为: (1)plot(x) 当x ...
- gVim多标签页
我们一般使用的文本编辑器,如:editplus.ultraEdit等都是支持多标签页的,可以同时打开多个文件,方便切换,以前gVim只能打开多个窗口,或者一个窗口切出多个窗口来编辑,自从7.0以后Vi ...
- JAXB - XML Schema Types, Defining Types for XML Elements With Content
Content: A Value The content of an XML element may be some value, or one or more subordinate element ...
- CORS 跨域
跨域请求一直是网页编程中的一个难题,在过去,绝大多数人都倾向于使用JSONP来解决这一问题.不过现在,我们可以考虑一下W3C中一项新的特性——CORS(Cross-Origin Resource Sh ...
- Agile.Net 组件式开发平台 - 开发环境部署
环境准备: Windows 7 (32/64) Windows Server 2008 (32/64) Microsoft SQL Server 2008 R2 (32/64) Microsoft V ...
- effective c++(07)之为多态基类声明virtual析构函数
class TimeKeeper { public: TimeKeeper() ; ~TimeKepper() ; ... } ; class AtomicClock:public TimeKeepe ...
- 【JAVA】抽象类
一.什么是抽象类 用abstract修饰的类就是抽象类.抽象类中可以有用abstract修饰的抽象方法,也可以没有抽象方法. 二.为什么要设计抽象类 在某些情况下,某个父类只是知道其子类应该包含怎样的 ...
- Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation)
Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation) 作为表单,字段验证当然是不能少的,今天我们来一起看看Ext.Net FormPanel的字段验证功能. ...
- 【html】【11】函数名称约束规范
一.匈牙利命名法: [不推荐]基本原则是:变量名=属性+类型+对象描述,其中每一对象的名称都要求有明确含义,可以取对象名字全称或名字的一部分.要基于容易记忆容易理解的原则.保证名字的连贯性是非常重要的 ...