原生js图片滚动插件仿新浪电影网站首页焦点图片滚动



112 446 149



特效描述:原生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

加群请备注:从官网了解到