大佬教程收集整理的这篇文章主要介绍了好漂亮的自适应jQuery焦点图特效，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta @R_674_10107@-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>jQuery焦点图切换自适应效果 - 何问起</title> <base target="_blank" /> <link rel="stylesheet" type="text/css" href="@R_674_10107@://hovertree.com/texiao/jquery/17/css/default.css"> <link rel="stylesheet" href="@R_674_10107@://hovertree.com/texiao/jquery/17/css/jquery.hiSlider.min.css"> <style type="text/css"> *{ margin: 0; padding: 0; } body{ font: 14px/2 'Microsoft YaHei','Arial'; } li{ list-style: none; } li img{ display: block; margin: 0 auto; } #wrap{ width: 80%; min-width: 300px; margin: 10px auto 80px; BACkground: #fefefe; } .hiSlider{ overflow: hidden; height: 280px; width: 500px; BACkground: #eee; } .hiSlider-item{ float: left; } </style> </head> <body> <div id="wrap"> <h1>jquery.hiSlider.js 插件使用说明及示例</h1> <h2>example1: 默认设置</h2> <ul class="hiSlider hiSliderHovertree1"> <li data-title="11111" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li> <li data-title="22222" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li> <li data-title="33333" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333"></li> <li data-title="44444" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li> <li data-title="55555" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li> </ul> <a href="@R_674_10107@://hovertree.com/hvtart/bjae/yqhu1ug9.htm">原文</a> <a href="@R_674_10107@://hovertree.com">首页</a> <a href="@R_674_10107@://hovertree.com/texiao/">特效</a> <a href="@R_674_10107@://hovertree.com/menu/jquery/">jQuery</a> <h2>example2: 弹性布局 + 淡入淡出</h2> <ul class="hiSlider hiSliderHovertree2"> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333"></li> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li> </ul> <h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2> <ul class="hiSlider hiSliderHovertree3"> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333何问起"></li> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li> <li class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li> </ul> <h2>example4: 改变方向</h2> <ul class="hiSlider hiSliderHovertree4"> <li data-title="11111" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li> <li data-title="22222" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/2.jpg" alt="22222"></li> <li data-title="33333" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333何问起"></li> <li data-title="44444" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li> <li data-title="55555" class="hiSlider-item"><img src="@R_674_10107@://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li> </ul> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="@R_674_10107@://hovertree.com/" target="_blank">何问起</a></p> </div> </div> <script src="@R_674_10107@://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script src="@R_674_10107@://hovertree.com/texiao/jquery/17/js/jquery.hiSlider.min.js"></script> <script> $('.hiSliderHovertree1').hiSlider(); $('.hiSliderHover'+'tree2').hiSlider({ isFlexible: true,mode: 'fade',isSupportTouch: false,isShowtitle: false,isShowPage: false,titleAttr: function(curIdX){ return $('img',this).attr('alt'); } }); $('.hiSliderHov'+'ertree3').hiSlider({ isFlexible: true,isSupportTouch: true,this).attr('alt'); } }); $('.hiSliderHover'+'tree4').hiSlider({ startSlide: 2,direction: 'top' }); </script> </body> </html>
以上是大佬教程为你收集整理的好漂亮的自适应jQuery焦点图特效全部内容，希望文章能够帮你解决好漂亮的自适应jQuery焦点图特效所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。