上下切换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 开发量身设计,可以令用户 ...
随机推荐
- 关于git fetch 和git pull 的区别
1.fetch 相当于是从远程获取最新版本呢到本地,不会自动merge. git fetch origin master:tmpgit diff tmp git merge tmp 2. git pu ...
- We~ˇsay~~ˇ
拂弹每一个音符 与心相印 行走每一段风景 和路缠绵 花开的声音 只能用心倾听 无论曾经如何艰难 我依然在最初的起点 默念歌唱 等你 携手
- [wordpress]后台自定义菜单字段和使用wordpress color picker
Wordpress Version 4.4.2 参考链接 插件使用wordpress color picker:Add A New Color Picker To WordPress 后台菜单自定义字 ...
- 如何提高jQuery的性能
缓存变量DOM遍历是昂贵的,所以尽量将会重用的元素缓存. // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // ...
- confirm的用法
内容换行:第一种方法:var str = "aaaaa\\n11111";confirm(str.replace("\\n","\n")); ...
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- nopCommerce的配置以及汉化
这里给大家一些链接,是关于nopCommerce的一些介绍: nopCommerce的源代码 关于nopcommerce Nopcommerce中文资源 第一步 配置nopCommerce 先上一张 ...
- Fragment的数据传递
开发之中用到的Fragment的次数越来越多,很多小的项目都已经直接在使用Fragment作为Activity的载体来切换页面.而在开发之中页面的切换我们最关心的问题就是数据的传递了.今天我们主要来研 ...
- Drbd 安装配置
一.Drbd介绍 Distributed Replicated Block Device(DRBD)是基于块设备在不同的高可用服务器之间同步和镜像数据的软件,通过它可以实现在网络中两台服务器这间基于块 ...
- 第一篇、C_高精度加法
简介: C语言中,整型占4字节,现在要计算两个100(假设)位以内的数想加,如果只是用整型去存储,明显就会越界.那么,我们有什么好的方法去完成这一操作呢? 1.用数组实现 数组中可以可以存储一定长度的 ...