今天我們來(lái)分享一款很靈活的jQuery焦點(diǎn)圖插件，和以前介紹的jQuery焦點(diǎn)圖動(dòng)畫(huà)類似，它也提供左右切換按鈕，同時(shí)在圖片上懸浮自定義圖片切換按鈕。切換動(dòng)畫(huà)包括上下左右切入動(dòng)畫(huà)以及淡入淡出動(dòng)畫(huà)。這款jQuery焦點(diǎn)圖最大的特點(diǎn)是支持移動(dòng)端觸摸功能。

 




*{
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;
}

 



jquery.hiSlider.js 插件使用說(shuō)明及示例
example1: 默認(rèn)設(shè)置
 







原文
特效
jQuery 
example2: 彈性布局 + 淡入淡出







 
example3: 支持觸摸事件 + 彈性布局 (請(qǐng)?jiān)谝苿?dòng)端測(cè)試)







 
example4: 改變方向








適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下瀏覽器。
來(lái)源：何問(wèn)起