爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
JS特效
jquery实现的多屏多图焦点图切换特效代码
jquery实现的多屏多图焦点图切换特效代码
日期：2014-05-18 浏览次数：22746 次
以下是程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>kinMaxShow 技巧效果 -demo by js.aiyiweb.com</title> <link type="text/css" href="_doc/base.css" rel="stylesheet" /> <style type="text/css"> body{ margin:0; padding:50px 0 0 0;} #show{width:600px; margin:0 auto;} #kinMaxShow{width:600px; height:300px; visibility:hidden; overflow:hidden;} #kinMaxShow p.title{ position:absolute; left:0; bottom:0; text-indent:10px; line-height:30px;font-family:Verdana; color:#FFF; display:block;width:100%; height:30px; font-family:14px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#aa000000,endcolorstr=#aa000000);background:rgba(0,0,0,0.5);} </style> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="http://www.iruizi.com/kinMaxShow/v1.1/jquery.kinMaxShow-1.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#kinMaxShow").kinMaxShow({ height:300, button:{ showIndex:true, normal:{width:'18px',height:'18px',lineHeight:'18px',right:'16px',bottom:'6px',fontSize:'12px',opacity:0.8,background:"#666666",border:"1px solid #999999",color:"#CCCCCC",marginRight:'6px'}, focus:{background:"#CC0000",border:"1px solid #FF0000",color:"#000000"} } }); }); </script> </head> <body> <div id="show"> <div id="kinMaxShow"> <div> <a href="http://www.qq.com" target="_blank"><img src="http://www.iruizi.com/kinMaxShow/images/demo_artifice_images/1.jpg" /></a> <p class="title">美国称将绕过联合国安理会自行惩罚叙利亚</p> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="http://www.iruizi.com/kinMaxShow/images/demo_artifice_images/2.jpg" /></a> <p class="title">西安军工企业夫妻藏匿国家机密资料被判刑</p> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="http://www.iruizi.com/kinMaxShow/images/demo_artifice_images/3.jpg" /></a> <p class="title">首都机场爆炸案嫌犯冀中星涉爆炸罪被公诉</p> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="http://www.iruizi.com/kinMaxShow/images/demo_artifice_images/4.jpg" /></a> <p class="title">美国摄影师离火山口仅1米处拍最完美喷发照</p> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="http://www.iruizi.com/kinMaxShow/images/demo_artifice_images/5.jpg" /></a> <p class="title">地方官员为跑批文驻北京 在部委端茶扫地打开水</p> </div> <div> <a href="http://www.qq.com" target="_blank"><img src="http://www</div></div> <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li> <li class="next"><a href="1060">下一篇：输入框的日期格式提示效果</a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/10838' title='打车App就是下一个团购骗局！？' target="_blank"> 打车App就是下一个团购骗局！？</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/6900' title='史玉柱卸任巨人网络CEO 继位人选引猜想' target="_blank"> 史玉柱卸任巨人网络CEO 继位人选引猜想</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/10843' title='电信设备商淘金中国4G：华为中兴领衔' target="_blank"> 电信设备商淘金中国4G：华为中兴领衔</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34458' title='2018年阿里云双11活动如何参加？1折优惠大攻略' target="_blank"> 2018年阿里云双11活动如何参加？1折优惠大攻略</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34089' title='苹果iWatch或使用量产液态金属 将取代玻璃' target="_blank"> 苹果iWatch或使用量产液态金属 将取代玻璃</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/10809' title='阿里马云：我觉得互联网还有十年可以做 ' target="_blank"> 阿里马云：我觉得互联网还有十年可以做 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34301' title='广电总局回应美剧下架：不是所有信息可公开' target="_blank"> 广电总局回应美剧下架：不是所有信息可公开</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34396' title='说说这一个月的赌球输了多少' target="_blank"> 说说这一个月的赌球输了多少</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/ItNews/34228' title='诺基亚因充电器问题暂停销售Lumia 2520平板电脑' target="_blank"> 诺基亚因充电器问题暂停销售Lumia 2520平板电脑</a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/host/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/host.png" alt="香港全能空间 香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/ItNews/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/ItNews/10847 title='论：三大运营商运用商店逆袭并非不能够' target="_blank"> 论：三大运营商运用商店逆袭并非不能够</a></li> <li class="articleAbout"><a href=/ItNews/34388 title='看蜗牛如何放水养鱼，盘活生态系统' target="_blank"> 看蜗牛如何放水养鱼，盘活生态系统</a></li> <li class="articleAbout"><a href=/ItNews/6850 title='携程收买酷讯成定局：转型互联网+投资' target="_blank"> 携程收买酷讯成定局：转型互联网+投资</a></li> <li class="articleAbout"><a href=/ItNews/16168 title='苹果优势逐渐丧失 传即将推出廉价iPhone' target="_blank"> 苹果优势逐渐丧失 传即将推出廉价iPhone</a></li> <li class="articleAbout"><a href=/ItNews/6909 title='史玉柱此刻离任：营销巨匠为新游戏炒作？' target="_blank"> 史玉柱此刻离任：营销巨匠为新游戏炒作？</a></li> <li class="articleAbout"><a href=/ItNews/6893 title='中移动本月推手机钱包 iPhone遭边缘化' target="_blank"> 中移动本月推手机钱包 iPhone遭边缘化</a></li> <li class="articleAbout"><a href=/ItNews/6918 title='用户喊话当当网：我彻底把你们丢弃了' target="_blank"> 用户喊话当当网：我彻底把你们丢弃了</a></li> <li class="articleAbout"><a href=/ItNews/34164 title='手游市场乱象丛生 受资本热捧野蛮成长' target="_blank"> 手游市场乱象丛生 受资本热捧野蛮成长</a></li> <li class="articleAbout"><a href=/ItNews/34131 title='HTC以品牌营销突围 专家建议改变经营思路' target="_blank"> HTC以品牌营销突围 专家建议改变经营思路</a></li> <li class="articleAbout"><a href=/ItNews/34136 title='首批四款“官方”打车软件发布：均为安卓版本' target="_blank"> 首批四款“官方”打车软件发布：均为安卓版本</a></li> <li class="articleAbout"><a href=/ItNews/34124 title='苏宁易购成世界最慢电商 专家称其涉嫌违约' target="_blank"> 苏宁易购成世界最慢电商 专家称其涉嫌违约</a></li> <li class="articleAbout"><a href=/ItNews/34390 title='微信企业号必须搬走四座大山，否则只能铩羽而归！' target="_blank"> 微信企业号必须搬走四座大山，否则只能铩羽而归！</a></li> <li class="articleAbout"><a href=/ItNews/34160 title='微软为避免代理权争夺 与大股东达成和解协议' target="_blank"> 微软为避免代理权争夺 与大股东达成和解协议</a></li> <li class="articleAbout"><a href=/ItNews/16154 title='Facebook财报前瞻：投资者仍信心不足' target="_blank"> Facebook财报前瞻：投资者仍信心不足</a></li> <li class="articleAbout"><a href=/ItNews/34385 title='三大运营商获通知大减营销费 传3年减400多亿' target="_blank"> 三大运营商获通知大减营销费 传3年减400多亿</a></li> <li class="articleAbout"><a href=/ItNews/34283 title='三星已经将Galaxy S5视为失败之作？' target="_blank"> 三星已经将Galaxy S5视为失败之作？</a></li> <li class="articleAbout"><a href=/ItNews/34263 title='窗口期：还有哪些互联网公司可能今年IPO？' target="_blank"> 窗口期：还有哪些互联网公司可能今年IPO？</a></li> <li class="articleAbout"><a href=/ItNews/34219 title='Android应用审核乱象：诈骗软件冲上排行榜首' target="_blank"> Android应用审核乱象：诈骗软件冲上排行榜首</a></li> <li class="articleAbout"><a href=/ItNews/34290 title='电信资费新政：三巨头压力大 短期降价仍有争议' target="_blank"> 电信资费新政：三巨头压力大 短期降价仍有争议</a></li> <li class="articleAbout"><a href=/ItNews/6899 title='高通拼抢国际芯片市场 联发科海外拓展难安心' target="_blank"> 高通拼抢国际芯片市场 联发科海外拓展难安心</a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2025 爱易网页 当前在线：227人 网站在1时47分29秒内访问总人数：24303人 当前 15.30% <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>
以下是程序代码 以下是程序代码