基于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