<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的更多相关文章

  1. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  2. bootstrap 标签页tab切换js(含报错原因)

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  3. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

  4. 标签切换JS代码

    //标签切换 var nav = $('.index-nav'); var content = $('.index-nav-content li'); function hoverNav ($eleA ...

  5. tab选项卡切换(js原生、jQuery )

    思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DO ...

  6. html 原生tab切换js

    $("#ulId li").on('click', function () { $("#li-container").children().hide(); $( ...

  7. jquery封装的图片切换js

    原文发布时间为:2010-10-09 -- 来源于本人的百度文章 [由搬家工具导入] http://jquery.malsup.com/cycle/browser.html

  8. 点击切换JS

    $(function(){ var tabnav = $("#tab-nav ul li"); tabnav.click(function(){ $(this).addClass( ...

  9. weui 多网页切换效果分析

    weui的文档写的不怎么详尽,简单的来讲WeUI 为微信 Web 服务量身设计的h5框架. WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户 ...

随机推荐

  1. (转)fastdfs_v4.07 / 实现多服务器

    http://my.oschina.net/shking/blog/165326 自己闲着没事,在小黑上虚拟了 4 个 centos 64 的系统,用来安装分布式 fastdfs . nginx 负载 ...

  2. matrix computing optimization schemes

    * stackoverflow: how does BLAS get such extern performance * Howto optimizate GEMM http://wiki.cs.ut ...

  3. 小米2s 用线刷,刷回MIUI V5了

    1. 在使用MiFlash刷机时,出现了:FAILED (remote: partition table doesn't exist) 参考了:[经验技巧]如果你合并分区后悔了,那么我有最简单的方法恢 ...

  4. 简单实体Json序列化(输出JSON的属性可变)

    简单实体Json序列化(输出JSON的属性可变) 一.先看效果 可以看出 , 我们在序列化一个对像时, 只给出了 我们想要 输出的两个字段名,  实际实体有5个属性, 经过可变属性序列化后的JSON ...

  5. Div+Css的初步运用

    采用DIV+CSS模式的网站具有以下优势:1.表现和内容相分离 2.代码简洁,提高页面浏览速度 3.易于维护和改版 4.提高搜索引擎对网页的索引效率. 然后呢html文件中放置CSS有三种类型:内联. ...

  6. angularjs开发总结

    使用AngularJS有差不多一年时间了,前前后后也用了不少库和指令,整理了一下,分成四大类列出.有demo地址的,就直接连接到demo地址,其它的直接链到github托管库中. 图片视频类 angu ...

  7. linux中的常用命令

    cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全相关 ...

  8. 在Linux上进行QT UI开发

    在QT Creator UI编辑器上通过拖拽各种控件产生UI界面,然后点击编译/Build按钮,会自动生成对应的ui_xxxx.h的 头文件/header file. 参考: 1.Linux上使用Qt ...

  9. InstallShield: Component-Feature Associations

    Quote from: http://helpnet.installshield.com/installshield16helplib/IHelpFeatAssociateComponents.htm ...

  10. thinkcmf thinkphp隐藏后台地址

    做了一个项目,上线的时候 需要隐藏掉domain.com/admin 这个后台地址,但是用的thinkcmf已经预定义好了admin模块. 我们可以用thinkphp自带的模块映射功能实现, 比方说我 ...