首页>>Jquery图片>>JQuery图文切换显示缩略图放大(2019-07-16)

JQuery图文切换显示缩略图放大

JQuery图文切换显示缩略图放大
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

 
XML/HTML Code
  1. <div id="content">  
  2. <h1>图文展示</h1>  
  3. <p>图片内容同时切换展示，可根据自己的需求自行排版</p>  
  4. <div id="gallery">  
  5. <div id="gallery_nav">  
  6. <a rel="img1" href="javascript:;"><img src="images/iphone_1.jpg"></a>  
  7. <a rel="img2" href="javascript:;"><img src="images/iphone_2.jpg"></a>  
  8. <a rel="img3" href="javascript:;"><img src="images/iphone_3.jpg"></a>  
  9. <a rel="img4" href="javascript:;"><img src="images/iphone_4.jpg"></a>  
  10. </div>  
  11. <div id="gallery_output">  
  12. <img id="img1" src="images/iphone_1b.jpg">  
  13. <img id="img2" src="images/iphone_2b.jpg" style="display: none;">  
  14. <img id="img3" src="images/iphone_3b.jpg" style="display: none;">  
  15. <img id="img4" src="images/iphone_4b.jpg" style="display: none;">  
  16. </div>  
  17. <div id="gallery_content">  
  18. <p id="pimg1">  
  19. <span class="sp">jQuery 效果函数</span><br>  
  20. <span class="ss"></span>  
  21. slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。  
  22. </p>  
  23. <p id="pimg2" style="display: none;">slideUp()通过调整高度来滑动隐藏被选元素</p>  
  24. <p id="pimg3" style="display: none;">show()显示被选的元素</p>  
  25. <p id="pimg4" style="display: none;">addClass()向匹配的元素添加指定的类名。</p>  
  26. </div>  
  27. <div class="clear"></div>  
  28. </div>  
  29. </div>  
XML/HTML Code
  1. <script language="javascript">  
  2.         $(document).ready(function() {  
  3.             $("#gallery_output img").not(":first").hide();  
  4.             $("#gallery_content p").not(":first").hide();  
  5.             $("#gallery a").click(function() {  
  6.                 $("#gallery a").removeClass('zz');  
  7.                 $(this).addClass("zz");  
  8.                 if ( $("#" + this.rel).is(":hidden") ) {  
  9.                     $("#gallery_output img").slideUp();  
  10.                     $("#gallery_content p").slideUp();  
  11.                     $("#" + this.rel).slideDown();  
  12.                     $("#p"+this.rel).slideDown();  
  13.                 }  
  14.             });  
  15.         });  
  16.   
  17.     </script>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_797.html