逆水行舟 不进则退
这是一款自己手写的响应式网站手风琴特效，希望可以帮助大家，以后会每周发布一个小demo。

html代码：
<div class="stage">
<ul class="cl">
<li><a href="#"><img src="picture/1.jpg" width="960" height="540"></a></li>
<li><a href="#"><img src="picture/2.jpg" width="960" height="540"></a></li>
<li><a href="#"><img src="picture/3.jpg" width="960" height="540"></a></li>
<li><a href="#"><img src="picture/4.jpg" width="960" height="540"></a></li>
<li><a href="#"><img src="picture/5.jpg" width="960" height="540"></a></li>
</ul>
</div>

css代码：
.stage{background: #fff; }
.stage ul{width: 100%; text-align: center;}
.stage ul li{display: inline-block; position: absolute; float: left; top: 0; height: 100%; overflow: hidden; -webkit-transition-timing-function: cubic-bezier(.38,.01,.22,1); transition-timing-function: cubic-bezier(.38,.01,.22,1); -webkit-transition-duration: 1.2s; transition-duration: 1.2s;}
.stage ul li a{display: block; width: 1000px; height: 100%; position: relative; top: 0; left: 50%; margin-left: -500px; text-align: center;}
.stage ul li a img{ width: auto; height: 100%; position: relative; background: #000;}

js代码：
var
$win=$(window),
$box=$('.stage'),
$ul=$box.find('ul'),
$ulli=$box.find('ul li'),
total=$ulli.size(),curInd=0;

        $ulli.css({transitionDuration: '0s'});

        $ulli.on({
            mouseenter : function(){
                curInd=$(this).index();
                setTimeout(function(){
                    changeWidth(curInd);
                },10);
            },
            click : function(){
                return false;
            }
        });

// $ul.mouseleave(function(){
// changeWidth(-1);
// });
// 初始ind=-1即<0满足第一个要求。

        var 
        fixMaxWidth=0;
        function changeWidth(ind){
            var
            norwidth=($win.width())/total,
            fixWidth=($win.width()-fixMaxWidth)/(total-1),
            leftValue=0,rightValue=0,tmpWidth=0;

            $ulli.each(function(i,j){
                if(ind<0){
                    rightValue=$win.width()-(i+1)*norwidth;
                    $(j).css({left: parseInt(leftValue), right: parseInt(rightValue), transitionDuration: ''});
                    leftValue+=norwidth;

// 图片宽平分

                }else{
                    if(i==ind){
                        tmpWidth=$(j).find('img').width();
                        $(j).css({opacity:'1'});
                    }else{
                        tmpWidth=fixWidth;
                        $(j).css({opacity:'.5'});
                    }
                    rightValue=$win.width()-(leftValue+tmpWidth);
                    $(j).css({left: parseInt(leftValue), right: parseInt(rightValue), transitionDuration: ''});
                    leftValue+=tmpWidth;

// 当前图片宽为图片实际宽度，其他图片宽为剩余平分宽度；right为屛宽-（left+平均宽度），left为宽度递加；
}
});
};
function resizeBox(){
var
imgH=$('.stage ul li a img').height(),
imgW=(imgH/$ulli.first().find('img').attr('height')) * $ulli.first().find('img').attr('width');
fixMaxWidth=imgW;
$ulli.find('img').css({height: imgH, width: imgW});
changeWidth(2);
//初始获取宽高及初始打开第几个图片
};

        $(window).on({
            resize : resizeBox
        });
        resizeBox();