原生js圖片滾動插件仿新浪電影網站首頁焦點圖片滾動



115 459 154



特效描述:原生js圖片 滾動插件 首頁焦點圖 滾動焦點圖,

代碼結構

1. HTML代碼

<script type="text/javascript">
//滾動圖
function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId,listType){this.scrollContId=scrollContId;this.arrLeftId=arrLeftId;this.arrRightId=arrRightId;this.dotListId=dotListId;this.listType=listType;this.dotClassName="dotItem";this.dotOnClassName="dotItemOn";this.dotObjArr=[];this.listEvent="onclick";this.circularly=true;this.pageWidth=0;this.frameWidth=0;this.speed=10;this.space=10;this.upright=false;this.pageIndex=0;this.autoPlay=true;this.autoPlayTime=5;this._autoTimeObj;this._scrollTimeObj;this._state="ready";this.stripDiv=document.createElement("DIV");this.lDiv01=document.createElement("DIV");this.lDiv02=document.createElement("DIV")};ScrollPic.prototype={version:"1.45",author:"mengjia",pageLength:0,touch:true,scrollLeft:0,eof:false,bof:true,initialize:function(){var thisTemp=this;if(!this.scrollContId){throw new Error("必須指定scrollContId.");return};this.scDiv=this.$(this.scrollContId);if(!this.scDiv){throw new Error("scrollContId不是正確的對象.(scrollContId = \""+this.scrollContId+"\")");return};this.scDiv.style[this.upright?'height':'width']=this.frameWidth+"px";this.scDiv.style.overflow="hidden";this.lDiv01.innerHTML=this.scDiv.innerHTML;this.scDiv.innerHTML="";this.scDiv.appendChild(this.stripDiv);this.stripDiv.appendChild(this.lDiv01);if(this.circularly){this.stripDiv.appendChild(this.lDiv02);this.lDiv02.innerHTML=this.lDiv01.innerHTML;this.bof=false;this.eof=false};this.stripDiv.style.overflow="hidden";this.stripDiv.style.zoom="1";this.stripDiv.style[this.upright?'height':'width']="32766px";this.lDiv01.style.overflow="hidden";this.lDiv01.style.zoom="1";this.lDiv02.style.overflow="hidden";this.lDiv02.style.zoom="1";if(!this.upright){this.lDiv01.style.cssFloat="left";this.lDiv01.style.styleFloat="left"};this.lDiv01.style.zoom="1";if(this.circularly&&!this.upright){this.lDiv02.style.cssFloat="left";this.lDiv02.style.styleFloat="left"};this.lDiv02.style.zoom="1";this.addEvent(this.scDiv,"mouseover",function(){thisTemp.stop()});this.addEvent(this.scDiv,"mouseout",function(){thisTemp.play()});if(this.arrLeftId){this.alObj=this.$(this.arrLeftId);if(this.alObj){this.addEvent(this.alObj,"mousedown",function(e){thisTemp.rightMouseDown();e=e||event;thisTemp.preventDefault(e)});this.addEvent(this.alObj,"mouseup",function(){thisTemp.rightEnd()});this.addEvent(this.alObj,"mouseout",function(){thisTemp.rightEnd()})}};if(this.arrRightId){this.arObj=this.$(this.arrRightId);if(this.arObj){this.addEvent(this.arObj,"mousedown",function(e){thisTemp.leftMouseDown();e=e||event;thisTemp.preventDefault(e)});this.addEvent(this.arObj,"mouseup",function(){thisTemp.leftEnd()});this.addEvent(this.arObj,"mouseout",function(){thisTemp.leftEnd()})}};var pages=Math.ceil(this.lDiv01[this.upright?'offsetHeight':'offsetWidth']/this.frameWidth),i,tempObj;this.pageLength=pages;if(this.dotListId){this.dotListObj=this.$(this.dotListId);this.dotListObj.innerHTML="";if(this.dotListObj){for(i=0;i<pages;i++){tempObj=document.createElement("span");this.dotListObj.appendChild(tempObj);this.dotObjArr.push(tempObj);if(i==this.pageIndex){tempObj.className=this.dotOnClassName}else{tempObj.className=this.dotClassName};if(this.listType=='number'){tempObj.innerHTML=i+1}else if(typeof(this.listType)=='string'){tempObj.innerHTML=this.listType}else{tempObj.innerHTML=''};tempObj.title="第"+(i+1)+"頁";tempObj.num=i;tempObj[this.listEvent]=function(){thisTemp.pageTo(this.num)}}}};this.scDiv[this.upright?'scrollTop':'scrollLeft']=0;if(this.autoPlay){this.play()};this._scroll=this.upright?'scrollTop':'scrollLeft';this._sWidth=this.upright?'scrollHeight':'scrollWidth';if(typeof(this.onpagechange)==='function'){this.onpagechange()};this.iPad()},leftMouseDown:function(){if(this._state!="ready"){return};var thisTemp=this;this._state="floating";clearInterval(this._scrollTimeObj);this._scrollTimeObj=setInterval(function(){thisTemp.moveLeft()},this.speed);this.moveLeft()},rightMouseDown:function(){if(this._state!="ready"){return};var thisTemp=this;this._state="floating";clearInterval(this._scrollTimeObj);this._scrollTimeObj=setInterval(function(){thisTemp.moveRight()},this.speed);this.moveRight()},moveLeft:function(){if(this._state!="floating"){return};if(this.circularly){if(this.scDiv[this._scroll]+this.space>=this.lDiv01[this._sWidth]){this.scDiv[this._scroll]=this.scDiv[this._scroll]+this.space-this.lDiv01[this._sWidth]}else{this.scDiv[this._scroll]+=this.space}}else{if(this.scDiv[this._scroll]+this.space>=this.lDiv01[this._sWidth]-this.frameWidth){this.scDiv[this._scroll]=this.lDiv01[this._sWidth]-this.frameWidth;this.leftEnd()}else{this.scDiv[this._scroll]+=this.space}};this.accountPageIndex()},moveRight:function(){if(this._state!="floating"){return};if(this.circularly){if(this.scDiv[this._scroll]-this.space<=0){this.scDiv[this._scroll]=this.lDiv01[this._sWidth]+this.scDiv[this._scroll]-this.space}else{this.scDiv[this._scroll]-=this.space}}else{if(this.scDiv[this._scroll]-this.space<=0){this.scDiv[this._scroll]=0;this.rightEnd()}else{this.scDiv[this._scroll]-=this.space}};this.accountPageIndex()},leftEnd:function(){if(this._state!="floating"&&this._state!='touch'){return};this._state="stoping";clearInterval(this._scrollTimeObj);var fill=this.pageWidth-this.scDiv[this._scroll]%this.pageWidth;this.move(fill)},rightEnd:function(){if(this._state!="floating"&&this._state!='touch'){return};this._state="stoping";clearInterval(this._scrollTimeObj);var fill=-this.scDiv[this._scroll]%this.pageWidth;this.move(fill)},move:function(num,quick){var thisTemp=this;var thisMove=num/5;var theEnd=false;if(!quick){if(thisMove>this.space){thisMove=this.space};if(thisMove<-this.space){thisMove=-this.space}};if(Math.abs(thisMove)<1&&thisMove!=0){thisMove=thisMove>=0?1:-1}else{thisMove=Math.round(thisMove)};var temp=this.scDiv[this._scroll]+thisMove;if(thisMove>0){if(this.circularly){if(this.scDiv[this._scroll]+thisMove>=this.lDiv01[this._sWidth]){this.scDiv[this._scroll]=this.scDiv[this._scroll]+thisMove-this.lDiv01[this._sWidth]}else{this.scDiv[this._scroll]+=thisMove}}else{if(this.scDiv[this._scroll]+thisMove>=this.lDiv01[this._sWidth]-this.frameWidth){this.scDiv[this._scroll]=this.lDiv01[this._sWidth]-this.frameWidth;this._state="ready";theEnd=true}else{this.scDiv[this._scroll]+=thisMove}}}else{if(this.circularly){if(this.scDiv[this._scroll]+thisMove<0){this.scDiv[this._scroll]=this.lDiv01[this._sWidth]+this.scDiv[this._scroll]+thisMove}else{this.scDiv[this._scroll]+=thisMove}}else{if(this.scDiv[this._scroll]+thisMove<=0){this.scDiv[this._scroll]=0;this._state="ready";theEnd=true}else{this.scDiv[this._scroll]+=thisMove}}};this.accountPageIndex();if(theEnd){this.accountPageIndex('end');return};num-=thisMove;if(Math.abs(num)==0){this._state="ready";if(this.autoPlay){this.play()};this.accountPageIndex();return}else{clearTimeout(this._scrollTimeObj);this._scrollTimeObj=setTimeout(function(){thisTemp.move(num,quick)},this.speed)}},pre:function(){if(this._state!="ready"){return};this._state="stoping";this.move(-this.pageWidth)},next:function(reStar){if(this._state!="ready"){return};this._state="stoping";if(this.circularly){this.move(this.pageWidth)}else{if(this.scDiv[this._scroll]>=this.lDiv01[this._sWidth]-this.frameWidth){this._state="ready";if(reStar){this.pageTo(0)}}else{this.move(this.pageWidth)}}},play:function(){var thisTemp=this;if(!this.autoPlay){return};clearInterval(this._autoTimeObj);this._autoTimeObj=setInterval(function(){thisTemp.next(true)},this.autoPlayTime*1000)},stop:function(){clearInterval(this._autoTimeObj)},pageTo:function(num){if(this.pageIndex==num){return};if(num<0){num=this.pageLength-1};clearTimeout(this._scrollTimeObj);clearInterval(this._scrollTimeObj);this._state="stoping";var fill=num*this.frameWidth-this.scDiv[this._scroll];this.move(fill,true)},accountPageIndex:function(type){var pageIndex=Math.round(this.scDiv[this._scroll]/this.frameWidth);if(pageIndex>=this.pageLength){pageIndex=0};this.scrollLeft=this.scDiv[this._scroll];var scrollMax=this.lDiv01[this._sWidth]-this.frameWidth;if(!this.circularly){this.eof=this.scrollLeft>=scrollMax;this.bof=this.scrollLeft<=0};if(type=='end'&&typeof(this.onmove)==='function'){this.onmove()};if(pageIndex==this.pageIndex){return};this.pageIndex=pageIndex;if(this.pageIndex>Math.floor(this.lDiv01[this.upright?'offsetHeight':'offsetWidth']/this.frameWidth)){this.pageIndex=0};var i;for(i=0;i<this.dotObjArr.length;i++){if(i==this.pageIndex){this.dotObjArr[i].className=this.dotOnClassName}else{this.dotObjArr[i].className=this.dotClassName}};if(typeof(this.onpagechange)==='function'){this.onpagechange()}},iPadX:0,iPadLastX:0,iPadStatus:'ok',iPad:function(){if(typeof(window.ontouchstart)==='undefined'){return};if(!this.touch){return};var tempThis=this;this.addEvent(this.scDiv,'touchstart',function(e){tempThis._touchstart(e)});this.addEvent(this.scDiv,'touchmove',function(e){tempThis._touchmove(e)});this.addEvent(this.scDiv,'touchend',function(e){tempThis._touchend(e)})},_touchstart:function(e){this.stop();this.iPadX=e.touches[0].pageX;this.iPadScrollX=window.pageXOffset;this.iPadScrollY=window.pageYOffset;this.scDivScrollLeft=this.scDiv[this._scroll]},_touchmove:function(e){if(e.touches.length>1){this._touchend()};this.iPadLastX=e.touches[0].pageX;var cX=this.iPadX-this.iPadLastX;if(this.iPadStatus=='ok'){if(this.iPadScrollY==window.pageYOffset&&this.iPadScrollX==window.pageXOffset&&Math.abs(cX)>20){this.iPadStatus='touch'}else{return}};this._state='touch';var scrollNum=this.scDivScrollLeft+cX;if(scrollNum>=this.lDiv01[this._sWidth]){if(this.circularly){scrollNum=scrollNum-this.lDiv01[this._sWidth]}else{return}};if(scrollNum<0){if(this.circularly){scrollNum=scrollNum+this.lDiv01[this._sWidth]}else{return}};this.scDiv[this._scroll]=scrollNum;e.preventDefault()},_touchend:function(e){if(this.iPadStatus!='touch'){return};this.iPadStatus='ok';var cX=this.iPadX-this.iPadLastX;if(cX<0){this.rightEnd()}else{this.leftEnd()};this.play()},_overTouch:function(){this.iPadStatus='ok'},$:function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}},isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,addEvent:function(obj,eventType,func){if(obj.attachEvent){obj.attachEvent("on"+eventType,func)}else{obj.addEventListener(eventType,func,false)}},delEvent:function(obj,eventType,func){if(obj.detachEvent){obj.detachEvent("on"+eventType,func)}else{obj.removeEventListener(eventType,func,false)}},preventDefault:function(e){if(e.preventDefault){e.preventDefault()}else{e.returnValue=false}}};
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#3b3b3b;text-decoration:none;font-family:"Microsoft YaHei","微軟雅黑","simhei","黑體";}
a:visited{color:#26566c;text-decoration:none;}
a:hover, a:active, a:focus{color:#0078aa;text-decoration:none;}	
body{background:#fff;color:#333;padding:5px 0;font:12px/20px "Microsoft YaHei","微軟雅黑","simhei","黑體";}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1;}
.b_cont{width:680px;height:382px;overflow:hidden;margin:20px auto 0 auto;position:relative;}
.ct_p_05{width:680px;height:382px;float:left;text-align:center;}
.ct_p_05 .ct_txt{display:block;line-height:50px;*line-height:50px;overflow:hidden;color:#fff;height:75px;cursor:pointer;filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr = '#8c000000', endColorstr = '#8c000000' );background-color:rgba(0,0,0,.55);_background:none;position: relative;margin-top: -75px;font-size: 20px;}
.ct_p_05 a:hover .ct_txt{color:#fff;text-decoration: underline;}
.scrDotList_wrap{text-align:center;width:100%;position:absolute;bottom:10px;}
.scrDotList{padding:0 10px;zoom:1;line-height: 0;}
.scrDotList span{display:inline-block;width:10px;height:10px;background:#000000;cursor:pointer;font-size:0;line-height:0;vertical-align:top;font-size: 0px;margin: 0 5px;}
.scrDotList span.on{background:#49cff1;}
a.scrArrAbsLeft{position:absolute;left:0;bottom:0px;width:75px;height:75px;background:url(images/0813_ent_zyc_images_v2.png) 0px -136px no-repeat;cursor:pointer;}
a.scrArrAbsLeft:hover{background-position: 0 -217px;}
a.scrArrAbsRight{position:absolute;right:-1px;bottom:0px;width:75px;height:75px;background:url(images/0813_ent_zyc_images_v2.png) no-repeat -83px -136px;cursor:pointer;}
a.scrArrAbsRight:hover{background-position: -83px -217px;}
</style>
<div class="b_cont">
	<div id="scroll_jdt">
		<div class="ct_p_05">
			<a href="#"><img width="680" height="382" alt="《前任攻略》新春寫真 發春運俏皮攻略" src="images/1.jpg"><span class="ct_txt">《前任攻略》新春寫真 發春運俏皮攻略</span></a>
		</div>
		<div class="ct_p_05">
			<a href="#"><img width="680" height="382" alt="《霍比特人2》特輯 弗瑞曼中文拜年" src="images/2.jpg"><span class="ct_txt">《霍比特人2》特輯 弗瑞曼中文拜年</span></a>
		</div>
		<div class="ct_p_05">
			<a href="#"><img width="680" height="382" alt="《大鬧天宮》情感特輯 解讀神魔情殤" src="images/3.jpg"><span class="ct_txt">《大鬧天宮》情感特輯 解讀神魔情殤</span></a>
		</div>
		<div class="ct_p_05">
			<a href="#"><img width="680" height="382" alt="《過界男女》陳坤海報 與女子曖昧相擁" src="images/4.jpg"><span class="ct_txt">《過界男女》陳坤海報 與女子曖昧相擁</span></a>
		</div>
	</div>
	<div class="scrDotList_wrap">
		<span class="scrDotList" id="slide_dot">
			<span></span>
		</span>
	</div>
	<a href="javascript:void(0)" id="scroll_left" class="scrArrAbsLeft"></a>
	<a href="javascript:void(0)" id="scroll_right" class="scrArrAbsRight"></a>
</div>
<script type="text/javascript">
(function(){
	var focusScroll_01 = new ScrollPic();
	focusScroll_01.scrollContId   = "scroll_jdt"; //內容容器ID
	focusScroll_01.dotListId = "slide_dot";
	focusScroll_01.dotClassName = "";
	focusScroll_01.dotOnClassName = "on";
	focusScroll_01.listType       = "";//列表類型(number:數字,其它為空)
	focusScroll_01.listEvent      = "onmouseover"; //切換事件
	focusScroll_01.frameWidth     = 680;//顯示框寬度
	focusScroll_01.pageWidth      = 680; //翻頁寬度
	focusScroll_01.upright        = false; //垂直滾動
	focusScroll_01.speed          = 10; //移動速度(單位毫秒,越小越快)
	focusScroll_01.space          = 60; //每次移動像素(單位px,越大越快)
	focusScroll_01.autoPlay       = true; //自動播放
	focusScroll_01.autoPlayTime   = 5; //自動播放間隔時間(秒)
	focusScroll_01.circularly     = true;
	focusScroll_01.initialize(); //初始化
	document.getElementById('scroll_left').onmousedown = function(){
		focusScroll_01.pre();
		return false;
	}
	document.getElementById('scroll_right').onmousedown = function(){
		focusScroll_01.next();
		return false;
	}
})()
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 圖片滾動 圖片滾動條 自動滾動圖片輪播 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子