我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
简介
多数网站首页都会采用一种合适的轮播图让用户看上去舒服点，今天给大家带来一个简易的手风琴轮播插件，下面就分享一下设计思路，喜欢的话给个赞哦！
页面布局
为了让页面展示更酷炫一点就多加了一个用作背景的标签<div class="bg bg-box-1"></div>，再配合手风琴标签设计ul > li的切换随之动态更换背景，如下代码所示：
<!-- 背景 -->
<div class="bg bg-box-1"></div>
<div class="bg bg-box-2"></div>
<div class="bg bg-box-3"></div>
<div class="bg bg-box-4"></div>
<!-- 手风琴标签 -->
<div id="wrap">
<ul>
<li>
<div class="text">
<p>海贼王<br>·<br>路飞</p>
</div>
</li>
<li>
<div class="text">
<p>海贼王<br>·<br>艾斯</p>
</div>
</li>
<li>
<div class="text">
<p>海贼王<br>·<br>白胡子</p>
</div>
</li>
<li class="curr">
<div class="text">
<p>海贼王<br>·<br>索隆</p>
</div>
</li>
</ul>
</div>
动画效果
手风琴轮播切换以及背景切换，核心代码就是通过javascript进行实现，整体动画效果代码如下：
触发动画的因素：
- 首先使用
$('#wrap li').mouseover()对手风琴的每个li标签添加鼠标覆盖的事件。- 在事件中对非当前
li标签进行动画操作!$(this).hasClass('curr')，即如果鼠标覆盖的是当前li标签则不进行动画处理，否则开始执行动画处理。
这里我们分析一下实现的动画效果：
- 先标记当前鼠标覆盖的标签，遍历所有手风琴标签获取到当前标签的索引，移除所有背景
$('.bg').fadeOut(300);，根据索引载入新背景$('.bg:eq(' + index + ')').fadeIn(500);。- 最后使用动画函数
animate()对当前鼠标覆盖标签元素增加宽度至700px，其余非鼠标覆盖的标签宽度缩小为100px。
(function(){
$('#wrap li').mouseover(function(){
if(!$(this).hasClass('curr')){
$('#wrap li').removeClass('curr');
$(this).addClass('curr');
// 切换背景
$('#wrap li').each(function(index){
if($(this).hasClass('curr')){
$('.bg').fadeOut(300);
$('.bg:eq(' + index + ')').fadeIn(500);
}
});
$('.curr').stop().animate({
width: 700
}, 500, 'linear');
$('#wrap li').not('.curr').stop().animate({
width: 100
}, 500, 'linear');
}
});
})()
代码块
总结
手风琴即是通过js动态改变每个标签的宽度实现，具体展示大小可自行更改参数，背景页根据个人喜好可有可无，期待各路大佬挖掘出更多的特效。
