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);
        }
    
    
    
    });
    
  • 相关阅读:
    1137 Final Grading (25 分)
    1136 A Delayed Palindrome (20 分)
    1135 Is It A Red-Black Tree (30 分)
    1134 Vertex Cover (25 分)
    1133 Splitting A Linked List (25 分)
    1074 Reversing Linked List (25 分)
    1132 Cut Integer (20 分)
    HDU 3342 Legal or Not
    IDEA解决JSP页面无法使用EL表达式问题
    25. Bootstreap 下拉菜单
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3849124.html
Copyright © 2011-2022 走看看