自适应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>

js代码：

 $('.hiSlider1').hiSlider();
        $('.hiSlider2').hiSlider({
            isFlexible: true,
            mode: 'fade',
            isSupportTouch: false,
            isShowTitle: false,
            isShowPage: false,
            titleAttr: function (curIdx) {
                return $('img', this).attr('alt');
            }
        });
        $('.hiSlider3').hiSlider({
            isFlexible: true,
            isSupportTouch: true,
            titleAttr: function (curIdx) {
                return $('img', this).attr('alt');
            }
        });
        $('.hiSlider4').hiSlider({
            startSlide: 2,
            direction: 'top'
        });

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

在线预览    源码下载