其实这样的效果 目前很多网站上都有 其实以前也写过一个 只是当时代码只是为了实现而已，代码很乱，所以现在有业余时间研究了下，其实也并没有什么特殊地方 很类似于左右控制按钮切换图片的思路。效果如下：
可能录制的时候 有点卡 。
具体思路： 1. 首先和左右箭头切换图片思路是一模一样的 点击下一页按钮时候 外层容器left = 一张图片的宽度×当前的索引index 同理 点击上一页按钮也一样 然后加点动画效果改变相对应的宽度和高度 就可以实现。思路其实很简单的。所以就半斤八两就写了一个，希望各位高手包涵啊！所以也没有什么好解释的地方。直接上代码，下面有源码附件 具体的可以看看源码。
HTML代码如下：
<div class="slider">
<a href="javascript:void(0);" class="prev btn"></a>
<div class="scroll">
<ul class="scrollContainer">
<li class="panel">
<a href="" class="inside" target="_blank">
<img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/1.jpg" />
<span>Alexander McQueen秋季1</span>
</a>
</li>
<li class="panel">
<a href="" class="inside" target="_blank">
<img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/2.jpg" />
<span>Gustavsson演绎朋克的性感</span>
</a>
</li>
<li class="panel">
<a href="" class="inside" target="_blank">
<img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/3.jpg" />
<span>Alexander McQueen秋季3</span>
</a>
</li>
<li class="panel">
<a href="" class="inside" target="_blank">
<img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/4.jpg" />
<span>Alexander McQueen秋季4</span>
</a>
</li>
<li class="panel">
<a href="" class="inside" target="_blank">
<img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/5.jpg" />
<span>Alexander McQueen秋季5</span>
</a>
</li>
<li class="panel">
<a href="" class="inside" target="_blank">
<img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/6.jpg" />
<span>Alexander McQueen秋季6</span>
</a>
</li>
<li class="panel">
<a href="" class="inside" target="_blank">
<img width="230" height="288" alt="Alexander McQueen秋季" src="data:images/7.jpg" />
<span>Alexander McQueen秋季7</span>
</a>
</li>
</ul>
</div>
<a href="javascript:void(0);" class="next btn"></a>
</div>
CSS代码如下：
<style>
*{margin:;padding:;list-style-type:none;}
a,img{border:;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
a{color:#000;outline:none;text-decoration:none;}
a:hover{text-decoration:underline;}
/* slider */
.slider{width:730px;height:312px;overflow:hidden;position:relative;margin:20px auto 0;}
.scroll{float:left;display:inline;width:660px;height:312px;margin-left:30px;overflow:hidden;position:relative;}
.scrollContainer{position: relative;left:0px;}
.scrollContainer .current .inside{width:230px;height:288px;} .scrollContainer .panel{width:170px;height:235px;float: left;padding-right:30px;overflow:hidden;} .panel .inside{display:block;position:relative; }
.inside img{height:100%;width:100%;}
.scroll li .inside span{
position:absolute;
bottom:0px;
left:16px;
width:197px;
height:37px;
line-height:37px;
display:none;
background-color:#c69;
font-size:14px;color:#FFF;
text-align:center;
z-index:;
}
.scroll li.current .inside span{display:block;} .slider a.btn{background:url('images/index.png') no-repeat;}
.slider a.btn{float:left;margin-top:92px;width:20px; height:39px; } .slider a.prev{background-position:0 -61px;}
.slider a.prev:hover{background-position:0 -102px;} .slider a.next{right:;background-position:-50px -61px;}
.slider a.next:hover{background-position:-50px -102px;} .scrollContainer .current {width:230px;height:312px;}
</style>
JS代码如下：
/*
* JS 3D效果
* @author tugenhua
* @date 2013-11-28
* @email 879083421@qq.com
*/
function LeftAndRight(options) { this.config = {
container : '.slider', // 最外层容器
scrollContainer : '.scrollContainer', // 外层容器ul
prevBtn : 'prev', // 上一页按钮
nextBtn : 'next', // 下一页按钮
currentCls : 'current', // 当前的类名
addItemWidth : 70, // 中间突出增加的宽度
changeBeforeWH : {width:'170px',height:'235px'}, // 改变前的宽度和高度
changeAfterWH : {width:'230px',height:'312px'}, // 改变后的宽度和高度
callback : null // 每次点击后的回调函数 @param 当前的第几个
}; this.cache = {
curIndex : 0 // 保存当前li的索引
}; this.init(options);
} LeftAndRight.prototype = { constructor: LeftAndRight, init: function(options) {
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config,
_cache = self.cache; // 初始化计算ul的宽度
self._calculateUlWidth(); // 所有事件
self._bindEnv();
},
_calculateUlWidth: function(){
var self = this,
_config = self.config,
_cache = self.cache; if($(_config.scrollContainer) && $(_config.scrollContainer + ' li').length > 0){ $(_config.scrollContainer).each(function(index,item){ var liWidth = $('li',item).outerWidth(),
liLen = $('li',item).length; // 初始化时候 让中间的li 增加class current
var centerLi = $('li',item)[_cache.curIndex + 1]; $(centerLi).animate({'width':_config.changeAfterWH.width,'height':_config.changeAfterWH.height}); $(item).css("width",liWidth * liLen + _config.addItemWidth);
}); }
},
_bindEnv: function() {
var self = this,
_config = self.config,
_cache = self.cache; if($(_config.container).length > 0) { $(_config.container).each(function(index,item){ // 事件代理
$(item).unbind('click');
$(item).bind('click',function(e){ var target = e.target; // 目前点击元素小于3个 用if else判断 否则的话 建议用switch
if($(target).hasClass(_config.prevBtn)){
self._prev($(this)); }else if($(target).hasClass(_config.nextBtn)){
self._next($(this)); }else { }
});
});
}
},
_prev: function(container){
var self = this,
_config = self.config,
_cache = self.cache; if(_cache.curIndex < 1) {
return;
}
_cache.curIndex--;
self._publicMethod(_cache.curIndex,container); },
_next: function(container){
var self = this,
_config = self.config,
_cache = self.cache; _cache.curIndex++; $(_config.scrollContainer).each(function(index,item){
var liLen = $('li',item).length;
if(_cache.curIndex >= liLen -2) {
_cache.curIndex = liLen -3;
return;
}
self._publicMethod(_cache.curIndex,container);
}); },
_publicMethod: function(curIndex,container){
var self = this,
_config = self.config,
_cache = self.cache; $(_config.scrollContainer,container).each(function(index,item){
var liWidth = $('li',item).outerWidth(),
liHeight = $('li',item).outerHeight(),
liLen = $('li',item).length; self._prevNextProcess({ulContainer:item,liW:liWidth,liH:liHeight,liLen:liLen,index:curIndex});
});
},
_prevNextProcess: function(cfg) {
var self = this,
_config = self.config,
_cache = self.cache; var curLi = $('li',cfg.ulContainer)[cfg.index + 1];
$('li',cfg.ulContainer).each(function(index,item){
$(item).css({'width':_config.changeBeforeWH.width,'height':_config.changeBeforeWH.height});
});
$(curLi).animate({'width':_config.changeAfterWH.width,'height':_config.changeAfterWH.height});
$(cfg.ulContainer).animate({'left':-cfg.index * cfg.liW},function(){ });
var cindex = cfg.index + 2;
_config.callback && $.isFunction(_config.callback) && _config.callback(cindex); }
};
// 初始化代码
$(function(){
new LeftAndRight({
callback: function(index){
//console.log(index);
}
});
});