Code666 (代码贴、代码片段)

[JavaScript] jquery图片切换，全带注释 →→→→→进入此内容的聊天室

来自 , 2020-05-25, 写在 JavaScript, 查看 167 次.
URL http://www.code666.cn/view/b4edda67
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script language="javascript" src="inc/jquery-1.4.2.js"></script>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>无标题文档</title>
  7. </head>
  8. <style type="text/css">
  9.  
  10. #butt div{
  11.  
  12.  width:122px; height:32px; float:left; text-align:center;
  13. }
  14.  
  15. </style>
  16. <script language="javascript">
  17.  
  18. function tab_q(now_id)
  19. {
  20.  
  21. if(now_id == null)
  22. {
  23.  //alert($("#butt").find("div:visible").attr("id"))
  24.         c_show_id = $("#cont").find("div:visible").attr("id"); //此时显示按钮的ID名称
  25.         nums_id  = c_show_id.substring(1,3); //截取B1后面的1，作为字符串放到C后面
  26.     b_show_id = "b"+ nums_id;   //此时显示内容的ID名称
  27.         nums_next = parseInt(nums_id)+1
  28.         //alert(nums_next)
  29.         if(nums_next<=8)//如果到最后一个的话，那么就要跳回第一个
  30.         {
  31.          
  32.         }
  33.         else
  34.         {
  35.         nums_next = 1
  36.        
  37.         }
  38. }else
  39. {
  40.  
  41. nums_next = now_id.substring(1,3);
  42.  
  43. }
  44.  
  45.                 $("#cont div").hide(); //让所有的上面的div中的图片消失。是为了罗出地方让下一张图片出现的。
  46.             $("#butt div").css({border:'#FF0000 0px solid'}); //让所有按钮的边框消失。是为了让下一个按钮有边框，
  47.                 //alert("#"+"c"+nums_next)
  48.             $("#c"+nums_next).fadeIn() //让上面的图片淡出来
  49.  
  50.                
  51.                 $("#b"+nums_next).css({border:'#FF0000 1px solid'}); //给下面对应的按钮加上边框，当然这里也可以做其他的效果。加边框只是为了测试
  52.        
  53.        
  54.  
  55. }
  56.  
  57. $(function(){ //当页面加载完成
  58.  
  59.         auto = setInterval("tab_q()",2000); //这里修改切换的时间的
  60.        
  61.         $("#cont div").each(function(i,n){
  62.                 $(n).hover(
  63.                 function(){  clearInterval(auto)  },function(){auto=setInterval("tab_q()",2000); }
  64.                
  65.                 )
  66.                
  67.                
  68.         })
  69.         $("#butt div").each(function(i,n){
  70.                 $(n).hover(
  71.                 function(){ clearInterval(auto);tab_q($(this).attr("id"))  },function(){auto=setInterval("tab_q()",2000); }
  72.                
  73.                 )
  74.                 })
  75.  
  76. })
  77.  
  78.  
  79. </script>
  80. <body>
  81. <div style="width:980px; height:275px;">
  82.  
  83.         <div style="width:980px; height:241px; overflow:hidden; text-align:center" id="cont">
  84.                 <div style="width:980px; height:241px; text-align:center" id="c1"><img src="images/xmjz.jpg"  width="980"/></div>
  85.                 <div style="width:980px; height:241px; display:none; text-align:center" id="c2"><img src="images/4037.jpg"  width="980" height="241"/></div>
  86.                 <div style="width:980px; height:241px; display:none; text-align:center" id="c3"><img src="images/4041.jpg"  width="980" height="241"/></div>
  87.                 <div style="width:980px; height:241px; display:none; text-align:center" id="c4"><img src="images/xmjz.jpg"  width="980"/></div>
  88.                 <div style="width:980px; height:241px; display:none;text-align:center" id="c5"><img src="images/xmjz.jpg"  width="980"/></div>
  89.                 <div style="width:980px; height:241px; display:none;text-align:center" id="c6"><img src="images/xmjz.jpg"  width="980"/></div>
  90.                 <div style="width:980px; height:241px; display:none;text-align:center" id="c7"><img src="images/xmjz.jpg"  width="980"/></div>
  91.                 <div style="width:980px; height:241px; display:none;text-align:center" id="c8"><img src="images/xmjz.jpg"  width="980"/></div>
  92.         </div>
  93. <div style="width:980px; height:31px; border:#FF0000 0px solid" id="butt">
  94.                
  95.                 <div style="background-image:url(images/xmbtn_1.png)" id="b1"></div>
  96.                 <div style="background-image:url(images/xmbtn_2.png)" id="b2"></div>
  97.                 <div style="background-image:url(images/xmbtn_2.png)" id="b3"></div>
  98.                 <div style="background-image:url(images/xmbtn_2.png)" id="b4"></div>
  99.                 <div style="background-image:url(images/xmbtn_2.png)" id="b5"></div>
  100.                 <div style="background-image:url(images/xmbtn_2.png)" id="b6"></div>
  101.                 <div style="background-image:url(images/xmbtn_2.png)" id="b7"></div>
  102.                 <div style="background-image:url(images/xmbtn_2.png)" id="b8"></div>
  103.                
  104. </div>
  105.  
  106. </div>
  107. </body>
  108. </html>
  109.  
  110. //javascript/6680

回复 "jquery图片切换，全带注释"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666