你的位置:首页 > Java教程

[Java教程]基于jQuery自适应焦点图特效


自适应jQuery焦点图特效。这是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

<div id="wrap">   <h1>jquery.hiSlider.js 插件使用说明及示例</h1>   <h2>example1: 默认设置</h2>    <ul class="hiSlider hiSlider1">     <li data-title="11111" class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>     <li data-title="22222" class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>     <li data-title="33333" class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>     <li data-title="44444" class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>     <li data-title="55555" class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>   </ul>    <h2>example2: 弹性布局 + 淡入淡出</h2>   <ul class="hiSlider hiSlider2">     <li class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>     <li class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>     <li class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>     <li class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>     <li class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>   </ul>    <h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2>   <ul class="hiSlider hiSlider3">     <li class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>     <li class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>     <li class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>     <li class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>     <li class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>   </ul>    <h2>example4: 改变方向</h2>   <ul class="hiSlider hiSlider4">     <li data-title="11111" class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>     <li data-title="22222" class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>     <li data-title="33333" class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>     <li data-title="44444" class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>     <li data-title="55555" class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>   </ul>   <script src="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script> </div>

via:http://www.w2bc.com/article/2015-12-15-jquery-hiSlider-js