百翔网络博客

★百翔网络★24小时服务热线:029-87617572,6年网站建设经验,您身边的网站建设专家专业致力于西安网站建设,西安网站制作,西安网站设计,西安网站优化,西安网站推广,西安网站维护,西安网页设计,西安网页制作,西安网站托管,西安网站建设公司,西安网站制作公司,西安网站设计公司,西安网站优化公司,西安做网站的公司,西安网页设计公司,西安网页制作公司,西安网站推广公司,西安网站维护公司等业务,品质保障,追求卓越!

« 带预览图的jQuery相册代码织梦CMS新手十大问题汇总 »

带缓冲的js菜单+大气的banner

百翔网络今天 和大家分梦想两个很不错的js效果

1.带缓冲的js菜单 请下载附件

带缓冲的js菜单.rar 解压测试

千万别忘了 背景图片  少了它效果可就没那么好了

2.大气的banner

css代码
  1. .homeBanner{width:999px;height:445px;margin:0 auto; background:url(../images/hbpbg.jpg) repeat-x 0 399px;}   
  2. .homeBanner .homeBigPic,.homeBanner .homeBigPic ul,.homeBanner .homeBigPic li{height:400px;width:999px;overflow:hidden;}   
  3. .homeBanner .homeBigPic li{ float:left;}   
  4. .homeBanner .count{padding-top:20px;text-align:center;}    
  5. .homeBanner .count img{width:18px;height:18px;background:url(../images/hnum2.gif); cursor:pointer;}    
  6. .homeBanner .count img.current{background:url(../images/hnum1.gif);}    
XML/HTML代码
  1. <div id="main">  
  2.     <div class="mainInfo">  
  3.     <div id="play01" class="homeBanner">  
  4.     <div class="homeBigPic">  
  5.     <ul style=" margin:auto; padding:0;">  
  6. <li><img src="images/0001.jpg" alt="看奥运 扬国威 品良品"/></li>  
  7. <li><img src="images/0002.jpg" alt="奥运能量源"/></li>  
  8. <li><img src="images/0003.jpg" alt="家佳康"/></li>  
  9. <li><img src="images/0004.jpg" alt="食品安全周"/></li>  
  10. <li><img src="images/0005.jpg" alt="中粮蒙牛阿拉战略协议签约"/></li>  
  11. <li><img src="images/0006.jpg" alt="深耕全产业链 践行央企责任"/></li>  
  12.  </ul>  
  13. </div>  
  14.                                 <div class="count"></div>  
  15.                         </div>  
  16.                                                    
  17.     </div>  
  18.                 <div class="mainBottom"></div>  
  19.   </div>  
  20.         <!-- 主体结束 -->  
  21. <script>    
  22.        
  23.             var t = n = -1, count = $("#play01 .homeBigPic li").size();   
  24.             var intervalTime = 7000;   
  25.             $("#play01 .homeBigPic ul").width(count*$("#play01 .homeBigPic li").width());   
  26.                
  27.                
  28.             for(i=0;i<count;i++){   
  29.                 $("#play01 .count").append("<img src='images/blank.gif' data='"+i+"' />");   
  30.             }   
  31.             $("#play01 .count img").click(   
  32.                 function(){   
  33.                     n=$(this).attr("data");   
  34.                     $("#play01 .homeBigPic").animate({scrollLeft:n*$("#play01 .homeBigPic li").width()});   
  35.                     $("#play01 .count img").removeClass("current");   
  36.                     $("#play01 .count img").eq(n).addClass("current");   
  37.                 }   
  38.             )   
  39.             t = setInterval("showPlay_()", intervalTime);   
  40.             $("#play01").hover(function(){clearInterval(t);}, function(){t = setInterval("showPlay_()", intervalTime);});   
  41.             function showPlay_(){   
  42.                 nn = n >= (count - 1) ? 0 : ++n;   
  43.                 $("#play01 .count img").eq(n).trigger('click');   
  44.             }   
  45.             showPlay_();   
  46.     
  47.             var t1 = n1 = -1, count1 = $("#play02 .homeBigPic li").size();   
  48.             var intervalTime1 = 5000;   
  49.             $("#play02 .homeBigPic ul").width(count*$("#play02 .homeBigPic li").width());   
  50.             for(i=0;i<count1;i++){   
  51.                 $("#play02 .count").append("<img src='images/blank.gif' data='"+i+"' "+(i==0?" class='current'":"")+"/>");   
  52.             }   
  53.             $("#play02 .count img").click(   
  54.                 function(){   
  55.                     n1=$(this).attr("data");   
  56.                     $("#play02 .homeBigPic").animate({scrollLeft:n1*$("#play02 .homeBigPic li").width()});   
  57.                     $("#play02 .count img").removeClass("current");   
  58.                     $("#play02 .count img").eq(n1).addClass("current");   
  59.                 }   
  60.             )   
  61.   
  62. </script>  

记得调用 jquery-1.4.2.js 插件 这里我就不再上传了 希望可以帮到大家

 

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

网站分类

最新评论及回复

最近发表

网站收藏

友情链接

图标汇集

Powered By 西安网站建设西安网站优化西安seoseo论坛西安安防监控

Copyright 2008-2010 百翔网络www.fly810.com, All Rights Reserved.