html：
<div class="posterwrap"> <div id="posterTvGrid86804"></div> </div>
css：
.posterTvGrid{position:relative;height:280px;}
.posterTvGrid img{max-none;max-height:none;border:0 none;background:#888;}
.posterTvGrid .contentHolder{position:relative;overflow:hidden;}
.posterTvGrid .contentHolderUnit{cursor:pointer;position:absolute;500px;height:250px;}
.posterTvGrid .contentHolderUnit a.elementLink{display:block;overflow:hidden;z-index:3;position:absolute;left:0;right:0;100%;height:100%;}
.posterTvGrid .contentHolderUnit img{100%;height:100%;}
.posterTvGrid .contentHolderUnit .elementTitle{}
.posterTvGrid .contentHolderUnit .elementOverlay{z-index:1;position:absolute;top:0;left:0;background:#000;100%;height:100%;opacity:0;filter:opacity=0;}
.posterTvGrid .contentHolderUnit .leftShadow{position:absolute;top:23px;left:-174px;174px;height:224px;background:url(/index/img/2013/leftShadow.png) no-repeat;}
.posterTvGrid .contentHolderUnit .rightShadow{position:absolute;top:23px;right:-174px;174px;height:224px;background:url(/index/img/2013/rightShadow.png) no-repeat;}
.posterTvGrid .bannerControls{}
.posterTvGrid .leftNav,.posterTvGrid .rightNav{cursor:pointer;z-index:10;position:absolute;top:50%;45px;height:45px;margin-top:-43px;}
.posterTvGrid .leftNav{left:7px;background:url("http://res.mfs.ykimg.com/0510000051AD63E96714C04A1400547A") no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/index/img/2013/slide_prev_btn.png");}
.posterTvGrid .rightNav{right:7px;background:url("http://res.mfs.ykimg.com/0510000051AD63F56714C04A1305CFEF") no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/index/img/2013/slide_next_btn.png");}
.posterTvGrid .leftNav:hover{}
.posterTvGrid .rightNav:hover{}
.posterTvGrid .bottomNav{z-index:140;position:absolute;100%;height:10px;margin-top:255px;padding:10px 0 0;text-align:center;}
.posterTvGrid .bottomNavButtonOFF{cursor:pointer;overflow:hidden;display:inline-block;*display:inline;*zoom:1;10px;height:10px;margin:0 5px;vertical-align:top;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#c3c3c3;}
.posterTvGrid .bottomNavButtonOFF:hover{background:#aaa;}
.posterTvGrid .bottomNavButtonON,
.posterTvGrid .bottomNavButtonON:hover{background:#69aaec;}
.posterTvGrid .bottomNavLeft{}
.posterTvGrid .bottomNavRight{}
js：
//电视剧大图滚动
(function(jq){
var posterTvGrid = function(o, options, data){
this.parent = jq("#"+ o);
this.body = jq("body");
if (this.parent.length <= 0) {
return false;
}
this.options = jq.extend({}, posterTvGrid.options, options);
if(typeof(data) !== 'object') return false;
if(typeof this.options.hotcode === 'undefined') this.options.hotcode = false;
this.data = data || {};
this.reset();
//处理页面resize
var _this = this;
jq(window).resize(function(){
_this.reset();
});
};
posterTvGrid.prototype = {
reset: function(options){
if(typeof(options) == 'object'){
jq.extend(this.options, options);
}
//if(parseInt(this.body.outerWidth())>1255 || navigator.userAgent.indexOf('iPad') !== -1){
this.options.width = 980;
//}else{
//this.options.width = 970;
//}
this.total = this.data.length;
this.pageNow = this.options.initPage;
this.preLeft = 0;
this.nextLeft = this.options.width-530;
this.preNLeft = -530;
this.nextNLeft = this.options.width;
this.pageNowLeft = (this.options.width-500)/2
this.drawContent();
},
drawContent: function(){
this.parent.empty();
this.parent.css({this.options.width+"px", height:this.options.height+"px", position: "relative"});
this.content = document.createElement("DIV");
this.content.className = this.options.className;
this.content.cssText = ""+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;";
this.bottomNav = document.createElement("DIV");
this.bottomNav.className = "bottomNav";
for(var i=1; i<= this.total; i++){
var bottomItem = document.createElement("DIV");
bottomItem.className = "bottomNavButtonOFF";
if(i == this.pageNow){
bottomItem.className = "bottomNavButtonOFF bottomNavButtonON";
}
bottomItem.setAttribute("ref", i);
this.bottomNav.appendChild(bottomItem);
}
this.content.appendChild(this.bottomNav);
this.bannerControls = '<div class="bannerControls"> <div class="leftNav" style="display: block;"></div> <div class="rightNav" style="display: block;"></div> </div>';
this.content.innerHTML += this.bannerControls;
this.contentHolder = document.createElement("DIV");
this.contentHolder.style.width = this.options.width + 'px';
this.contentHolder.style.height = this.options.height + 'px';
for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){
var datafrom = this.options.hotcode ? 'data-from="1-' + i + '"' : '';
var contentHolderUnit = document.createElement("DIV");
contentHolderUnit.className = "contentHolderUnit";
contentHolderUnit.setAttribute("ref", i);
contentHolderUnit.setAttribute("id", 'contentHolderUnit' + (i));
var unitItem = '<a href="'+this.data[item].url+'" target="_blank" class="elementLink" ' + datafrom + '>';
unitItem += '</a>';
unitItem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>';
unitItem += '<span class="elementOverlay"></span>';
unitItem += '<span class="leftShadow"></span>';
unitItem += '<span class="rightShadow"></span>';
contentHolderUnit.innerHTML = unitItem;
this.contentHolder.appendChild(contentHolderUnit);
}
this.content.appendChild(this.contentHolder);
this.parent.append(this.content);
this.parent.css({overflow:'hidden'});
this.initContent();
this.bind();
this.start();
},
initContent: function(){
contentHolderUnit = this.parent.find(".contentHolderUnit");
contentHolderUnit.css({'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zIndex:0, marginTop: '135px'});
this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({'500px',height:'250px', opacity: 1, left: this.pageNowLeft+'px', zIndex: 3, marginTop: 0});
this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .elementOverlay").css({opacity:0});
this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .leftShadow").css({opacity:1});
this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+") .rightShadow").css({opacity:1});
var pre = this.pageNow > 1 ? this.pageNow -1: this.total;
var next = this.pageNow == this.total ? 1 : this.pageNow + 1;
this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 1, left: this.preLeft+'px',height: '200px', '530px', zIndex: 0, marginTop: '25px'});
this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 1, left: this.nextLeft+'px',height: '200px', '530px', zIndex: 0, marginTop: '25px'});
this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
},
bind: function(){
this.leftNav = this.parent.find(".leftNav");
this.rightNav = this.parent.find(".rightNav");
this.bottonNav = this.parent.find(".bottomNavButtonOFF");
this.lists = this.parent.find(".contentHolderUnit");
var _this = this;
this.parent.mouseover(function(){
_this.stop();
_this.leftNav.show();
_this.rightNav.show();
});
this.parent.mouseout(function(){
_this.start();
//_this.leftNav.hide();
//_this.rightNav.hide();
});
_this.leftNav.click(function(){
_this.turn("right");
});
_this.rightNav.click(function(){
_this.turn("left");
});
_this.bottonNav.click(function(){
var ref = parseInt(this.getAttribute("ref"));
if(_this.pageNow == ref) return false;
if(_this.pageNow < ref){
var rightAbs = ref - _this.pageNow;
var leftAbs = _this.pageNow + _this.total - ref;
}else{
var rightAbs = _this.total - _this.pageNow + ref;
var leftAbs = _this.pageNow - ref;
}
if(leftAbs < rightAbs){
dir = "right";
}else{
dir = "left";
}
_this.turnpage(ref, dir);
return false;
});
_this.lists.click(function(e){
var ref = parseInt(this.getAttribute("ref"));
if(_this.pageNow == ref) {
return true;
}else{
e.preventDefault();
}
if(_this.pageNow < ref){
var rightAbs = ref - _this.pageNow;
var leftAbs = _this.pageNow + _this.total - ref;
}else{
var rightAbs = _this.total - _this.pageNow + ref;
var leftAbs = _this.pageNow - ref;
}
if(leftAbs < rightAbs){
dir = "right";
}else{
dir = "left";
}
_this.turnpage(ref, dir);
});
},
initBottomNav: function(){
this.parent.find(".bottomNavButtonOFF").removeClass("bottomNavButtonON");
this.parent.find(".bottomNavButtonOFF:nth-child("+this.pageNow+")").addClass("bottomNavButtonON");
},
start: function(){
var _this = this;
if(_this.timerId) _this.stop();
_this.timerId = setInterval(function(){
if(_this.options.direct == "left"){
_this.turn("left");
}else{
_this.turn("right");
}
}, _this.options.delay);
},
stop: function(){
clearInterval(this.timerId);
},
turn: function(dir){
var _this = this;
if(dir == "right"){
var page = _this.pageNow -1;
if(page <= 0) page = _this.total;
}else{
var page = _this.pageNow + 1;
if(page > _this.total) page = 1;
}
_this.turnpage(page, dir);
},
turnpage: function(page, dir){
var _this = this;
if(_this.locked) return false;
_this.locked = true;
if(_this.pageNow == page) return false;
var run = function(page, dir, t){
var pre = page > 1 ? page -1: _this.total;
var next = page == _this.total ? 1 : page + 1;
var preP = pre - 1 >= 1 ? pre-1 : _this.total;
var nextN = next + 1 > _this.total ? 1 : next+1;
if(pre != _this.pageNow && next != _this.pageNow){
var nowpre = _this.pageNow > 1 ? _this.pageNow -1: _this.total;
var nownext = _this.pageNow == _this.total ? 1 : _this.pageNow + 1;
_this.parent.find(".contentHolderUnit:nth-child("+nowpre+")").animate({'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
_this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").animate({'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
_this.parent.find(".contentHolderUnit:nth-child("+nownext+")").animate({'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zIndex:0, marginTop: '135px'}, t);
}
if(dir == 'left'){
_this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
_this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '200px', '530px', zIndex: 2, marginTop: '25px'}, t);
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3});
_this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '250px', '500px', zIndex: 3, marginTop: '0'}, t);
_this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
_this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
_this.parent.find(".contentHolderUnit:nth-child("+next+")").css({opacity: 0, left: _this.nextNLeft+'px', height: '200px', '530px', zIndex: 2, marginTop: '25px'});
_this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '200px', "530px", zIndex: 2, marginTop: '25px'}, t);
_this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
_this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+preP+")").css({zIndex:0});
_this.parent.find(".contentHolderUnit:nth-child("+preP+")").animate({'530px',height:'200px', opacity: 0, left:_this.preNLeft+'px', zIndex:0, marginTop: '25px'},t, "", function(){_this.locked=false;});
}else{
_this.parent.find(".contentHolderUnit:nth-child("+_this.pageNow+")").css({zIndex: 0});
_this.parent.find(".contentHolderUnit:nth-child("+next+")").css({zIndex:2});
_this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+'px', height: '200px', '530px', zIndex: 2, marginTop: '25px'}, t);
_this.parent.find(".contentHolderUnit:nth-child("+next+") .elementOverlay").css({opacity:0.4});
_this.parent.find(".contentHolderUnit:nth-child("+next+") .leftShadow").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+next+") .rightShadow").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+page+")").css({zIndex: 3}, t);
_this.parent.find(".contentHolderUnit:nth-child("+page+")").animate({opacity: 1, left: _this.pageNowLeft+'px', height: '250px', '500px', zIndex: 3, marginTop: '0px'}, t);
_this.parent.find(".contentHolderUnit:nth-child("+page+") .elementOverlay").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+page+") .leftShadow").css({opacity:1});
_this.parent.find(".contentHolderUnit:nth-child("+page+") .rightShadow").css({opacity:1});
_this.parent.find(".contentHolderUnit:nth-child("+pre+")").css({opacity: 0, left: _this.preNLeft+'px', height: '200px', '530px', zIndex: 2, marginTop: '25px'});
_this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+'px', height: '200px', '530px', zIndex: 2, marginTop: '25px'}, t);
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .elementOverlay").css({opacity:0.4});
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .leftShadow").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+pre+") .rightShadow").css({opacity:0});
_this.parent.find(".contentHolderUnit:nth-child("+nextN+")").css({zIndex:0});
_this.parent.find(".contentHolderUnit:nth-child("+nextN+")").animate({'530px',height:'200px', opacity: 0, left:_this.nextNLeft+'px', zIndex:0, marginTop: '25px'}, t, "",function(){_this.locked=false;});
}
_this.pageNow = page;
_this.initBottomNav();
};
run(page, dir,_this.options.speed);
}
};
posterTvGrid.options = {
offsetPages : 3,//默认可视最大条数
direct : "left",//滚动的方向
initPage : 1,//默认当前显示第几条
className : "posterTvGrid",//最外层样式
autoWidth : true,//默认不用设置宽
width : 980,//最外层宽，需要使用的时候在传,默认由程序自动判断
height : 280,//最外层高
delay : 5000,//滚动间隔（毫秒）
speed : 500 //滚动速度毫秒
};
window.posterTvGrid = posterTvGrid;
})(jQuery);
数据：
<script>
var posterTvGrid86804 = new posterTvGrid('posterTvGrid86804',{
className: "posterTvGrid",
hotcode: true},
[{"img":"http://r3.ykimg.com/0510000053DF02456737B36AA103CAE0","title":"u53e4u5251u5947u8c2d","url":"http://v.youku.com/v_show/id_XNzU1OTAwOTY4.html"},{"img":"http://r4.ykimg.com/0510000053D52D2A6737B30A7808E06E","title":"u66fcu54c8u987fu8ba1u5212","url":"http://v.youku.com/v_show/id_XNzU3NDcyMTI0.html"},{"img":"http://r4.ykimg.com/0510000053F188366737B3659908EC86","title":"u4e09u5251u5ba2","url":"http://v.youku.com/v_show/id_XNzU3MzUyMDQ0.html"},{"img":"http://r3.ykimg.com/0510000053C496EA6737B364DA0D832C","title":"u5fe0u5978u4eba","url":"http://v.youku.com/v_show/id_XNzU3ODcwMDc2.html"},{"img":"http://r3.ykimg.com/0510000053D5B58A6737B3527F00127A","title":"u6ca1u5173u7cfbu662fu7231u60c5u554a","url":"http://v.youku.com/v_show/id_XNzU1OTA1Njg4.html"},{"img":"http://r3.ykimg.com/0510000053E97C5A6737B325E2037481","title":"u8f7du5f97u6709u60c5u4eba","url":"http://v.youku.com/v_show/id_XNzU3ODQ3MzU2.html"},{"img":"http://r3.ykimg.com/0510000053C4996D6737B33957006612","title":"u8bf1u60d1","url":"http://v.youku.com/v_show/id_XNzU3ODgzNTA0.html"},{"img":"http://r2.ykimg.com/0510000053D1D84D6737B3787607BB2E","title":"u7403u7231u9152u5427","url":"http://v.youku.com/v_show/id_XNzU1MTczOTk2.html"},{"img":"http://r4.ykimg.com/0510000053E0ADCB6737B32F630164CF","title":"u7ea6u4f1au4e13u5bb6","url":"http://v.youku.com/v_show/id_XNzQ4ODM3MzA0.html"}]
);
</script>