<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>基于jQuery的简易手风琴切换插件@Mr.Think</title>
<style type="text/css">
.demotitle{font-size:18px;line-height:2.4}
.iaccordion{position:relative;width:780px;height:300px;overflow:hidden}
.iaccordion img{display:block;width:480px;height:300px;}
.iaccordion02{position:relative;width:100%;height:300px;overflow:hidden}
.iaccordion02 .item{width:70%;height:265px;padding:15px;border-left:5px solid #9bcbff;background-color:#f5f5f5}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://files.cnblogs.com/kb0662/jQuery.easing.min.js"></script>
<script type="text/javascript">
;(function($){
$.fn.iAccordion=function(iSet){
var self=this;
iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{});
/*
* Type: 鼠标事件类型，mouseover,click,mouseleave等
* Select: 选择器，用以获取需要切换的元素集合
* Cur: 默认展开元素的索引
* InitInterval: 初始化手风琴效果动画间隔时间
* Interval: 鼠标事件动画间隔时间
* Easing: 动画效果，需要jQuery.easing支持，参数可参考jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
*/
var item,boxW,selectW,animateW,sIndex,animateL;
$(self).each(function(){
//初始化容器样式
$(this).css({'position':'relative','overflow':'hidden'});
item=$(this).find(iSet.Select);
//初始化切换元素样式
item.css({'position':'absolute','left':0,'top':0});
boxW=$(this).outerWidth();
selectW=item.outerWidth();
animateW=(boxW-selectW)/(item.size()-1);
//初始化元素排列并为元素data一个索引值
item.each(function(i){
$(this).animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing);
$(this).data('index',i);
}).on(iSet.Type,function(e){//绑定鼠标事件
//获取当前元素索引值
sIndex=$(this).data('index');
//鼠标事件动画，通过判断元素索引值与当前元素索引值的大小关系动画显示当前元素并动画排列
item.each(function(n){
n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n;
$(this).stop().animate({'left':animateL+'px'},iSet.Interval,iSet.Easing);
});
}).eq(iSet.Cur).trigger(iSet.Type);
});
}
})(jQuery);
$(function(){
//图片切换
$('.iaccordion').iAccordion({
Easing:'easeOutBounce'
});
//容器类切换
$('.iaccordion02').iAccordion({
Select:'.item',
Easing:'easeOutQuint'
});
});
</script>
</head>
<body>
<div id="demo">
<h2 class="demotitle">图片类应用</h2>
<div class="iaccordion">
<a href="http://mrthink.net/"><img src="http://mrthink.net/demo/images/demoimg/d_01.jpg" alt="" /></a></li>
<a href="http://mrthink.net/"><img src="http://mrthink.net/demo/images/demoimg/d_02.jpg" alt="" /></a></li>
<a href="http://mrthink.net/"><img src="http://mrthink.net/demo/images/demoimg/d_03.jpg" alt="" /></a></li>
<a href="http://mrthink.net/"><img src="http://mrthink.net/demo/images/demoimg/d_04.jpg" alt="" /></a></li>
</div>
<h2 class="demotitle" style="margin-top:20px">容器类应用</h2>
<div class="iaccordion02">
<div class="item">
容器1
</div>
<div class="item">
容器2
</div>
<div class="item">
容器3
</div>
<div class="item">
容器4
</div>
<div class="item">
容器5
</div>
</div>
</div>
</body>
</html>
