基于jQuery自适应焦点图特效
发布时间:2016-01-27 14:00:18
自适应jQuery焦点图特效。这是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等。效果图如下:在线预览 源码下载实现的代码。html代码:<div id="wrap"> < ...
自适应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/loading.gif' data-original="images/1.jpg" ></li> <li data-title="22222" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/2.jpg" ></li> <li data-title="33333" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/3.jpg" ></li> <li data-title="44444" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/4.jpg" ></li> <li data-title="55555" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/5.jpg" ></li> </ul> <h2>example2: 弹性布局 + 淡入淡出</h2> <ul class="hiSlider hiSlider2"> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/1.jpg" ></li> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/2.jpg" ></li> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/3.jpg" ></li> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/4.jpg" ></li> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/5.jpg" ></li> </ul> <h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2> <ul class="hiSlider hiSlider3"> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/1.jpg" ></li> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/2.jpg" ></li> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/3.jpg" ></li> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/4.jpg" ></li> <li class="hiSlider-item"><img src='/images/loading.gif' data-original="images/5.jpg" ></li> </ul> <h2>example4: 改变方向</h2> <ul class="hiSlider hiSlider4"> <li data-title="11111" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/1.jpg" ></li> <li data-title="22222" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/2.jpg" ></li> <li data-title="33333" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/3.jpg" ></li> <li data-title="44444" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/4.jpg" ></li> <li data-title="55555" class="hiSlider-item"><img src='/images/loading.gif' data-original="images/5.jpg" ></li> </ul> <script src='/images/loading.gif' data-original="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script> </div>
原标题:基于jQuery自适应焦点图特效
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。