zoukankan      html  css  js  c++  java
  • 上下切换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);
        }
    
    
    
    });
    
  • 相关阅读:
    JSONP
    函数式编程
    Cookie
    IE userData
    Web Storage
    前端学PHP之会话Session
    数据结构之归并排序
    数据结构之冒泡排序
    数据结构之插入排序
    数据结构之选择排序
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3849124.html
Copyright © 2011-2022 走看看