首页 > 代码库 > 轮播图

轮播图

html:

<div class="posterwrap">		<div id="posterTvGrid86804"></div></div>

 css:

.posterTvGrid{position:relative;height:280px;}.posterTvGrid img{max-width:none;max-height:none;border:0 none;background:#888;}.posterTvGrid .contentHolder{position:relative;overflow:hidden;}.posterTvGrid .contentHolderUnit{cursor:pointer;position:absolute;width:500px;height:250px;}.posterTvGrid .contentHolderUnit a.elementLink{display:block;overflow:hidden;z-index:3;position:absolute;left:0;right:0;width:100%;height:100%;}.posterTvGrid .contentHolderUnit img{width:100%;height:100%;}.posterTvGrid .contentHolderUnit .elementTitle{}.posterTvGrid .contentHolderUnit .elementOverlay{z-index:1;position:absolute;top:0;left:0;background:#000;width:100%;height:100%;opacity:0;filter:opacity=0;}.posterTvGrid .contentHolderUnit .leftShadow{position:absolute;top:23px;left:-174px;width:174px;height:224px;background:url(/index/img/2013/leftShadow.png) no-repeat;}.posterTvGrid .contentHolderUnit .rightShadow{position:absolute;top:23px;right:-174px;width: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%;width: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="http://www.mamicode.com/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="http://www.mamicode.com/index/img/2013/slide_next_btn.png");}.posterTvGrid .leftNav:hover{}.posterTvGrid .rightNav:hover{}.posterTvGrid .bottomNav{z-index:140;position:absolute;width: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;width: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 = http://www.mamicode.com/data || {};"px", height:this.options.height+"px", position: "relative"});			this.content = document.createElement("DIV");			this.content.className = this.options.className;			this.content.cssText = "width:"+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="http://www.mamicode.com/‘+this.data[item].url+‘" target="_blank" class="elementLink" ‘ + datafrom + ‘>‘;				unitItem += ‘</a>‘;				unitItem += ‘<img src="http://www.mamicode.com/‘+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({width:‘0px‘,height:‘0px‘, opacity: 0, left:this.options.width/2+‘px‘, zIndex:0, marginTop: ‘135px‘});			this.parent.find(".contentHolderUnit:nth-child("+this.pageNow+")").css({width:‘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‘, width: ‘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‘, width: ‘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({width:‘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({width:‘0px‘,height:‘0px‘, opacity: 0, left:_this.options.width/2+‘px‘, zIndex:0, marginTop: ‘135px‘}, t);					_this.parent.find(".contentHolderUnit:nth-child("+nownext+")").animate({width:‘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‘, width: ‘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‘, width: ‘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‘, width: ‘530px‘, zIndex: 2, marginTop: ‘25px‘});					_this.parent.find(".contentHolderUnit:nth-child("+next+")").animate({opacity: 1, left: _this.nextLeft+‘px‘, height: ‘200px‘, width:"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({width:‘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‘, width: ‘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‘, width: ‘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‘, width: ‘530px‘, zIndex: 2, marginTop: ‘25px‘});					_this.parent.find(".contentHolderUnit:nth-child("+pre+")").animate({opacity: 1, left: _this.preLeft+‘px‘, height: ‘200px‘, width: ‘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({width:‘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":"\u53e4\u5251\u5947\u8c2d","url":"http:\/\/v.youku.com\/v_show\/id_XNzU1OTAwOTY4.html"},{"img":"http:\/\/r4.ykimg.com\/0510000053D52D2A6737B30A7808E06E","title":"\u66fc\u54c8\u987f\u8ba1\u5212","url":"http:\/\/v.youku.com\/v_show\/id_XNzU3NDcyMTI0.html"},{"img":"http:\/\/r4.ykimg.com\/0510000053F188366737B3659908EC86","title":"\u4e09\u5251\u5ba2","url":"http:\/\/v.youku.com\/v_show\/id_XNzU3MzUyMDQ0.html"},{"img":"http:\/\/r3.ykimg.com\/0510000053C496EA6737B364DA0D832C","title":"\u5fe0\u5978\u4eba","url":"http:\/\/v.youku.com\/v_show\/id_XNzU3ODcwMDc2.html"},{"img":"http:\/\/r3.ykimg.com\/0510000053D5B58A6737B3527F00127A","title":"\u6ca1\u5173\u7cfb\u662f\u7231\u60c5\u554a","url":"http:\/\/v.youku.com\/v_show\/id_XNzU1OTA1Njg4.html"},{"img":"http:\/\/r3.ykimg.com\/0510000053E97C5A6737B325E2037481","title":"\u8f7d\u5f97\u6709\u60c5\u4eba","url":"http:\/\/v.youku.com\/v_show\/id_XNzU3ODQ3MzU2.html"},{"img":"http:\/\/r3.ykimg.com\/0510000053C4996D6737B33957006612","title":"\u8bf1\u60d1","url":"http:\/\/v.youku.com\/v_show\/id_XNzU3ODgzNTA0.html"},{"img":"http:\/\/r2.ykimg.com\/0510000053D1D84D6737B3787607BB2E","title":"\u7403\u7231\u9152\u5427","url":"http:\/\/v.youku.com\/v_show\/id_XNzU1MTczOTk2.html"},{"img":"http:\/\/r4.ykimg.com\/0510000053E0ADCB6737B32F630164CF","title":"\u7ea6\u4f1a\u4e13\u5bb6","url":"http:\/\/v.youku.com\/v_show\/id_XNzQ4ODM3MzA0.html"}]);</script>