上下切换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 开发量身设计,可以令用户 ...
随机推荐
- SWT中的布局之-----FormLayout(表格式布局)
表格式(FormLayout类) 表格式布局管理器,通过创建组件各个边的距离来布局组件,和GridLayout一样强大. 用GridLayout与FormLayout都可以实现相同的界面效果,但有时使 ...
- Centos 6.5 安装 chrome , mplayer , alarm , clock
http://my.oschina.net/jianweizhang/blog/306946 Chrome wget http://chrome.richardlloyd.org.uk/install ...
- js限制文本框只能输入数字
JS判断只能是数字和小数点1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'') ...
- JSDOM之节点
javascript-节点属性详解 根据 DOM,HTML 文档中的每个成分都是一个节点. DOM 是这样规定的: 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中 ...
- 第六章 jQuery操作表单
1.单行文本框的应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- TortoiseSVN 安装中文语言包,SVN中文语言包
SVN中TortoiseSVN 是比较出门的一款SVN软件 TortoiseSVN 是Subversion 版本控制系统的一个免费开源客户端. 由于TortoiseSVN 默认是英文的:所以很多小伙伴 ...
- 数据库笔试题(经典select语句的用法)【转载】
原文地址:数据库笔试题(经典select语句的用法)作者:lily 问题描述: 为管理岗位业务培训信息,建立3个表: S (S#,SN,SD,SA) S#,SN,SD,SA 分别代表学号.学员姓名.所 ...
- RSA算法使用介绍
http://www.cnblogs.com/AloneSword/p/3326750.html RSA是目前最有影响力的公钥加密算法,该算法基于一个十分简单的数论事实:将两个大素数相乘十分容易,但那 ...
- Python阅读清单
Python <零基础学Python(第二版)> 包括进阶 The Python Tutorial 绝对权威和主题丰富的官方教程 PEP 8 以及 PEP 257 编码风格/规范 PEP ...
- ###STL学习--适配器
点击查看Evernote原文. #@author: gr #@date: 2014-08-24 #@email: forgerui@gmail.com STL中的适配器. ###stl学习 |--迭代 ...