当前位置:96看吧 > 实用代码 > 焦点图 > 游戏门户网站jQuery焦点图代码

游戏门户网站jQuery焦点图代码

时间:2013/07/31
作者:MaWendong.CN
来源:本站整理
查看:

jQuery焦点图代码

焦点图代码是游戏门户网站专题页面最常用的宽屏jQuery焦点图代码,使用jQuery+CSS实现,代码简洁、调用方便、修改灵活,适合任何网站使用。

适合做游戏官网焦点图,兼容IE及其它主流浏览器,在IE6下无图片淡入淡出效果。96看推荐下载使用该焦点图。

使用方法:按顺序引入archefoucs.css、jQuery脚本库文件;

基于jQuery写的该网页特效核心代码如下;

  1. <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> 
  2. <script type="text/javascript"> 
  3. $(function () {  
  4.     var $con = $('#gg'), $box = $con.find('#ggBox'), $btns = $con.find('#ggBtns'), i = 0autoChange = function () {  
  5.         i += 1;  
  6.         if (i === 4) { i = 0; }  
  7.         $btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn');  
  8.         var curr = $box.find('a:eq(' + i + ')'), prev = curr.siblings();  
  9.         prev.css('z-index', 2);  
  10.         curr.css('z-index', 3).animate({  
  11.             'opacity': 1  
  12.         }, 150, function () {  
  13.             prev.css({  
  14.                 'z-index': 1, 'opacity': 0.1  
  15.             });  
  16.         });  
  17.     }, loop = setInterval(autoChange, 5000);  
  18.     $con.hover(function () {  
  19.         clearInterval(loop);  
  20.     }, function () {  
  21.         loop = setInterval(autoChange, 5000);  
  22.     });  
  23.     $btns.find('a').click(function () {  
  24.         i = $(this).index() - 1;  
  25.         autoChange();  
  26.     });  
  27. });  
  28. </script> 

 

上一篇:支付宝宽屏焦点图代码jQuery焦点图
下一篇:自适应jQuery宽屏焦点图代码
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门