jQuery焦点图切换自适应效果
自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件，支持flexible布局，支持移动触摸事件等。
今天我们要来分享一款很灵活的jQuery焦点图插件，和以前介绍的jQuery焦点图动画类似，它也提供左右切换按钮，同时在图片上悬浮自定义图片切换按钮。切换动画包括上下左右切入动画以及淡入淡出动画。这款jQuery焦点图最大的特点是支持移动端触摸功能。
体验效果：http://hovertree.com/texiao/jquery/17/
代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-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="http://hovertree.com/texiao/jquery/17/css/default.css">
<link rel="stylesheet" href="http://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="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>
<li data-title="22222" class="hiSlider-item"><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaG92ZXJ0cmVlLmNvbS90ZXhpYW8vanF1ZXJ5LzE3L2ltYWdlcy8yLmpwZw==.jpg" alt="22222"></li>
<li data-title="33333" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333"></li>
<li data-title="44444" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>
<li data-title="55555" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/5.jpg" alt="55555"></li>
</ul>
<a href="http://hovertree.com/hvtart/bjae/yqhu1ug9.htm">原文</a>
<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/jquery/">jQuery</a>
<h2>example2: 弹性布局 + 淡入淡出</h2>
<ul class="hiSlider hiSliderHovertree2">
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>
<li class="hiSlider-item"><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaG92ZXJ0cmVlLmNvbS90ZXhpYW8vanF1ZXJ5LzE3L2ltYWdlcy8yLmpwZw==.jpg" alt="22222"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>
<li class="hiSlider-item"><img src="http://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="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>
<li class="hiSlider-item"><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaG92ZXJ0cmVlLmNvbS90ZXhpYW8vanF1ZXJ5LzE3L2ltYWdlcy8yLmpwZw==.jpg" alt="22222"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333何问起"></li>
<li class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>
<li class="hiSlider-item"><img src="http://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="http://hovertree.com/texiao/jquery/17/images/1.jpg" alt="11111"></li>
<li data-title="22222" class="hiSlider-item"><img src="//bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvaG92ZXJ0cmVlLmNvbS90ZXhpYW8vanF1ZXJ5LzE3L2ltYWdlcy8yLmpwZw==.jpg" alt="22222"></li>
<li data-title="33333" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/3.jpg" alt="33333何问起"></li>
<li data-title="44444" class="hiSlider-item"><img src="http://hovertree.com/texiao/jquery/17/images/4.jpg" alt="44444"></li>
<li data-title="55555" class="hiSlider-item"><img src="http://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="http://hovertree.com/" target="_blank">何问起</a></p>
</div>
</div> <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script src="http://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,
titleAttr: function(curIdx){
return $('img', this).attr('alt');
}
});
$('.hiSliderHover'+'tree4').hiSlider({
startSlide: 2,
direction: 'top'
});
</script> </body>
</html>