多屏JS幻灯片

HTML代码

<LINK rel="stylesheet" type="text/css" href="img/sld.css"><SCRIPT type="text/javascript" src="img/sld.js"></SCRIPT><DIV class="FocusPic"><DIV id="FS_arr_left_01" class="FP_arr_left"></DIV><DIV id="FS_arr_right_01" class="FP_arr_right"></DIV><DIV id="FS_numList_01" class="FP_NumList"></DIV><DIV id="FS_Cont_01" class="FP_cont"><DIV class="FP_pic">    <DIV>       <A href="#" target="_blank">          <IMG alt="第一幅图片" src="img/aa.jpg" galleryImg="no">        </A>    </DIV><DIV class="FP_tit_bg"></DIV><DIV class="FP_tit_txt"><A href="#" target="_blank">第一幅图片</A></DIV><DIV class="FP_tit_ico"></DIV></DIV>

<DIV class="FP_pic"><DIV><A href="#" target="_blank"><IMG alt="第二幅图片" src="img/a2.jpg" galleryImg="no"></A></DIV><DIV class="FP_tit_bg"></DIV><DIV class="FP_tit_txt"><A href="#" target="_blank">第二幅图片</A></DIV><DIV class="FP_tit_ico"></DIV></DIV><DIV class="FP_pic"><DIV><A href="#" target="_blank"><IMG alt="第三幅图片" src="img/a3.jpg" galleryImg="no"></A></DIV><DIV class="FP_tit_bg"></DIV><DIV class="FP_tit_txt"><A href="#" target="_blank">第三幅图片</A></DIV><DIV class="FP_tit_ico"></DIV></DIV><DIV class="FP_pic"><DIV><A href="#" target="_blank"><IMG alt="第四幅图片" src="img/a4.jpg" galleryImg="no"></A></DIV><DIV class="FP_tit_bg"></DIV><DIV class="FP_tit_txt"><A href="#" target="_blank">第四幅图片</A></DIV><DIV class="FP_tit_ico"></DIV></DIV></DIV></DIV><SCRIPT language="javascript" type="text/javascript">     var focusScroll_01 = new ScrollPic();     focusScroll_01.scrollContId   = "FS_Cont_01";      focusScroll_01.arrLeftId      = "FS_arr_left_01";         focusScroll_01.arrRightId     = "FS_arr_right_01";      focusScroll_01.dotListId      = "FS_numList_01";         focusScroll_01.dotClassName   = "";          focusScroll_01.dotOnClassName    = "selected";     focusScroll_01.listType        = "number";         focusScroll_01.listEvent      = "onmouseover";           focusScroll_01.frameWidth     = 500;         focusScroll_01.pageWidth      = 500;      focusScroll_01.upright        = false;           focusScroll_01.speed          = 10;      focusScroll_01.space          = 30;      focusScroll_01.autoPlay       = true;      focusScroll_01.autoPlayTime   = 3;      focusScroll_01.initialize();        </SCRIPT>

CSS：

body {
	background: rgb(204, 204, 204);
}
.FocusPic {
	margin: 10px; width: 500px; height: 280px; overflow: hidden; position: relative; zoom: 1;
}
.FocusPic .FP_angle {
	width: 7px; height: 7px; line-height: 0; overflow: hidden; font-size: 0px; position: absolute; z-index: 10;
}
.FocusPic .FP_arr_left {
	background: url("p_w_06.gif") no-repeat 0px 0px; left: 5px; top: 145px; width: 13px; height: 25px; filter: Alpha(Opacity=80); position: absolute; z-index: 8; cursor: pointer; opacity: 0.8;
}
.FocusPic .FP_arr_right {
	background: url("p_w_06.gif") no-repeat -200px 0px; top: 145px; width: 13px; height: 25px; right: 5px; filter: Alpha(Opacity=80); position: absolute; z-index: 8; cursor: pointer; opacity: 0.8;
}
.FocusPic .FP_NumList {
	right: 20px; bottom: 7px; overflow: hidden; position: absolute; z-index: 9; zoom: 1;
}
.FocusPic .FP_NumList span {
	background: rgb(0, 0, 0); padding: 0px 5px; color: rgb(255, 255, 255); font-family: Arial, Helvetica, sans-serif; margin-left: 10px; float: left; display: inline; cursor: pointer;
}
.FocusPic .FP_NumList span.selected {
	background: rgb(255, 255, 255); color: rgb(0, 0, 0);
}
.FocusPic .FP_pic {
	width: 500px; height: 280px; overflow: hidden; float: left;
}
.FocusPic .FP_pic .FP_tit_bg {
	background: rgb(0, 0, 0); width: 100%; height: 40px; margin-top: -70px; filter: Alpha(Opacity=30); opacity: 0.3;
}
.FocusPic .FP_pic .FP_tit_txt {
	color: rgb(255, 255, 255); line-height: 36px; padding-left: 18px;  font-size: 16px; font-weight: bold; margin-top: -40px; position: relative;
}
.FocusPic .FP_pic .FP_tit_ico {
	margin: -22px 0px 0px 7px; width: 11px; height: 15px; line-height: 0; overflow: hidden; font-size: 0px; position: relative;
}
.FocusPic .FP_pic a:link {
	color: rgb(255, 255, 255); text-decoration: none;
}
.FP_pic a:visited {
	color: rgb(255, 255, 255); text-decoration: none;
}
.FocusPic .FP_pic a:hover {
	text-decoration: underline;
}
p {
	color: rgb(102, 102, 102); font-size: 12px;
}
p a {
	color: rgb(102, 102, 102); font-size: 12px;
}

JS代码：

var sina={$:function(a){if(document.getElementById){return eval(‘document.getElementById("‘+a+‘")‘)}else{return eval(‘document.all.‘+a)}},isIE:navigator.appVersion.indexOf("MSIE")!=-1?true:false,addEvent:function(a,b,c){if(a.attachEvent){a.attachEvent("on"+b,c)}else{a.addEventListener(b,c,false)}},delEvent:function(a,b,c){if(a.detachEvent){a.detachEvent("on"+b,c)}else{a.removeEventListener(b,c,false)}},readCookie:function(l){var i="",I=l+"=";if(document.cookie.length>0){var a=document.cookie.indexOf(I);if(a!=-1){a+=I.length;var b=document.cookie.indexOf(";",a);if(b==-1)b=document.cookie.length;i=unescape(document.cookie.substring(a,b))}};return i},writeCookie:function(O,o,l,I){var i="",c="";if(l!=null){i=new Date((new Date).getTime()+l*3600000);i="; expires="+i.toGMTString()};if(I!=null){c=";domain="+I};document.cookie=O+"="+escape(o)+i+c},readStyle:function(i,I){if(i.style[I]){return i.style[I]}else if(i.currentStyle){return i.currentStyle[I]}else if(document.defaultView&&document.defaultView.getComputedStyle){var l=document.defaultView.getComputedStyle(i,null);return l.getPropertyValue(I)}else{return null}}};function ScrollPic(a,b,c,d,e){this.scrollContId=a;this.arrLeftId=b;this.arrRightId=c;this.dotListId=d;this.listType=e;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.listDiv01=document.createElement("DIV");this.listDiv02=document.createElement("DIV")};ScrollPic.prototype.version="1.20";ScrollPic.prototype.author="mengjia";ScrollPic.prototype.initialize=function(){var a=this;if(!this.scrollContId){throw new Error("必须指定scrollContId.");return};this.scrollContDiv=sina.$(this.scrollContId);if(!this.scrollContDiv){throw new Error("scrollContId不是正确的对象.(scrollContId = \""+this.scrollContId+"\")");return};this.scrollContDiv.style[this.upright?‘height‘:‘width‘]=this.frameWidth+"px";this.scrollContDiv.style.overflow="hidden";this.listDiv01.innerHTML=this.scrollContDiv.innerHTML;this.scrollContDiv.innerHTML="";this.scrollContDiv.appendChild(this.stripDiv);this.stripDiv.appendChild(this.listDiv01);if(this.circularly){this.stripDiv.appendChild(this.listDiv02);this.listDiv02.innerHTML=this.listDiv01.innerHTML};this.stripDiv.style.overflow="hidden";this.stripDiv.style.zoom="1";this.stripDiv.style[this.upright?‘height‘:‘width‘]="32766px";if(!this.upright){this.listDiv01.style.cssFloat="left";this.listDiv01.style.styleFloat="left";this.listDiv01.style.overflow="hidden"};this.listDiv01.style.zoom="1";if(this.circularly&&!this.upright){this.listDiv02.style.cssFloat="left";this.listDiv02.style.styleFloat="left";this.listDiv02.style.overflow="hidden"};this.listDiv02.style.zoom="1";sina.addEvent(this.scrollContDiv,"mouseover",function(){a.stop()});sina.addEvent(this.scrollContDiv,"mouseout",function(){a.play()});if(this.arrLeftId){this.arrLeftObj=sina.$(this.arrLeftId);if(this.arrLeftObj){sina.addEvent(this.arrLeftObj,"mousedown",function(){a.rightMouseDown()});sina.addEvent(this.arrLeftObj,"mouseup",function(){a.rightEnd()});sina.addEvent(this.arrLeftObj,"mouseout",function(){a.rightEnd()})}};if(this.arrRightId){this.arrRightObj=sina.$(this.arrRightId);if(this.arrRightObj){sina.addEvent(this.arrRightObj,"mousedown",function(){a.leftMouseDown()});sina.addEvent(this.arrRightObj,"mouseup",function(){a.leftEnd()});sina.addEvent(this.arrRightObj,"mouseout",function(){a.leftEnd()})}};if(this.dotListId){this.dotListObj=sina.$(this.dotListId);this.dotListObj.innerHTML="";if(this.dotListObj){var b=Math.round(this.listDiv01[this.upright?‘offsetHeight‘:‘offsetWidth‘]/this.frameWidth+0.4),i,tempObj;for(i=0;i<b;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};tempObj.title="第"+(i+1)+"页";tempObj.num=i;tempObj[this.listEvent]=function(){a.pageTo(this.num)}}}};this.scrollContDiv[this.upright?‘scrollTop‘:‘scrollLeft‘]=0;if(this.autoPlay){this.play()}};ScrollPic.prototype.leftMouseDown=function(){if(this._state!="ready"){return};var a=this;this._state="floating";this._scrollTimeObj=setInterval(function(){a.moveLeft()},this.speed)};ScrollPic.prototype.rightMouseDown=function(){if(this._state!="ready"){return};var a=this;this._state="floating";this._scrollTimeObj=setInterval(function(){a.moveRight()},this.speed)};ScrollPic.prototype.moveLeft=function(){if(this.circularly){if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+this.space>=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]){this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]=this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+this.space-this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]}else{this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+=this.space}}else{if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+this.space>=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]-this.frameWidth){this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]-this.frameWidth;this.leftEnd()}else{this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+=this.space}};this.accountPageIndex()};ScrollPic.prototype.moveRight=function(){if(this.circularly){if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]-this.space<=0){this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]+this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]-this.space}else{this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]-=this.space}}else{if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]-this.space<=0){this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]=0;this.rightEnd()}else{this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]-=this.space}};this.accountPageIndex()};ScrollPic.prototype.leftEnd=function(){if(this._state!="floating"){return};this._state="stoping";clearInterval(this._scrollTimeObj);var a=this.pageWidth-this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]%this.pageWidth;this.move(a)};ScrollPic.prototype.rightEnd=function(){if(this._state!="floating"){return};this._state="stoping";clearInterval(this._scrollTimeObj);var a=-this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]%this.pageWidth;this.move(a)};ScrollPic.prototype.move=function(a,b){var c=this;var d=a/5;if(!b){if(d>this.space){d=this.space};if(d<-this.space){d=-this.space}};if(Math.abs(d)<1&&d!=0){d=d>=0?1:-1}else{d=Math.round(d)};var e=this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+d;if(d>0){if(this.circularly){if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+d>=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]){this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]=this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+d-this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]}else{this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+=d}}else{if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+d>=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]-this.frameWidth){this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]-this.frameWidth;this._state="ready";return}else{this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+=d}}}else{if(this.circularly){if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+d<0){this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]+this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+d}else{this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+=d}}else{if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]-d<0){this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]=0;this._state="ready";return}else{this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]+=d}}};a-=d;if(Math.abs(a)==0){this._state="ready";if(this.autoPlay){this.play()};this.accountPageIndex();return}else{this.accountPageIndex();this._scrollTimeObj=setTimeout(function(){c.move(a,b)},this.speed)}};ScrollPic.prototype.pre=function(){if(this._state!="ready"){return};this._state="stoping";this.move(-this.pageWidth,true)};ScrollPic.prototype.next=function(a){if(this._state!="ready"){return};this._state="stoping";if(this.circularly){this.move(this.pageWidth,true)}else{if(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]>=this.listDiv01[(this.upright?‘scrollHeight‘:‘scrollWidth‘)]-this.frameWidth){this._state="ready";if(a){this.pageTo(0)}}else{this.move(this.pageWidth,true)}}};ScrollPic.prototype.play=function(){var a=this;if(!this.autoPlay){return};clearInterval(this._autoTimeObj);this._autoTimeObj=setInterval(function(){a.next(true)},this.autoPlayTime*1000)};ScrollPic.prototype.stop=function(){clearInterval(this._autoTimeObj)};ScrollPic.prototype.pageTo=function(a){if(this.pageIndex==a){return};clearTimeout(this._scrollTimeObj);this._state="stoping";var b=a*this.frameWidth-this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)];this.move(b,true)};ScrollPic.prototype.accountPageIndex=function(){var a=Math.round(this.scrollContDiv[(this.upright?‘scrollTop‘:‘scrollLeft‘)]/this.frameWidth);if(a==this.pageIndex){return};this.pageIndex=a;if(this.pageIndex>Math.round(this.listDiv01[this.upright?‘offsetHeight‘:‘offsetWidth‘]/this.frameWidth+0.4)-1){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}}};

箭头图片：

图片大小：width: 500px; height: 280px;

如需改变大小需改

focusScroll_01.frameWidth     = 500;
focusScroll_01.pageWidth      = 500;
.FocusPic  { width: 500px; height: 280px; }
.FocusPic .FP_pic { width: 500px; height: 280px;}

并调整下方标题显示位置

.FocusPic .FP_pic .FP_tit_bg { margin-top: -70px; }

.FocusPic .FP_pic .FP_tit_txt { margin-top: -40px; }
时间： 2024-10-06 16:22:59

多屏JS幻灯片的相关文章

大屏进度幻灯片网站模板

大屏进度幻灯片网站模板是一款绿色风格的手机类网站html模板下载. 模板地址:http://www.huiyi8.com/sc/8782.html 大屏进度幻灯片网站模板,布布扣,bubuko.com

支持移动触摸设备的简洁js幻灯片插件

lory是一款支持移动触摸设备的简洁的js幻灯片插件.该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为jquery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用easing效果. 以下列出该幻灯片的一些特点: 支持移动触摸设备. 简单,界面整洁,纯js调用. 可以作为jQuery插件来使用. 过渡效果支持硬件加速. 可定制easing效果. 可无限循环,制作为旋转木马. 丰富的回调函数. 效果演示:http://www.htmleaf.com/Demo/201504

js幻灯片生成工具wow slider免费版去除水印的方法

1.生成幻灯片页面文件之后,在engine1/wowslider.js里找到如下代码段: 1 e.css({ 2 "font-weight": "normal", 3 "font-style": "normal", 4 padding: "1px 5px", 5 margin: "0 0 0 0", 6 "border-radius": "10px"

手机锁屏js倒计时停止问题解决办法探索

如图,有这么个需求,测试人员在测试过程中提了一个bug,手机锁屏再唤醒倒计时时间没有更新,仍从锁屏的时间继续,于是开始寻找解决之法 经了解得知,锁屏时候,浏览器的一切活动会停止运行,那么js也无法幸免,这时候就想到有没有能监听浏览器活动停止的方法呢?一查,果然有 visibilitychange 具体可参看https://www.css88.com/archives/6103, 重要的就是给window加一个visibilitychange监听,在里面判断document.tVisibility

带标题和描述的JS幻灯片特效

<script type="text/javascript"> //选择器 function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}} //焦点滚动图 点击移动 function movec() { var

面向对象原生js幻灯片代淡出效果

下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

JS 判断ipad android 等移动设备横竖屏代码 源码--AangJava

废话不多说,直接进入正题! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <title> JS 判断ipad android 等移动设备横竖屏代码 源码--AangJava</

常用js特效

事件源对象  event.srcElement.tagName event.srcElement.type 捕获释放  event.srcElement.setCapture();  event.srcElement.releaseCapture(); 事件按键  event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值  event.returnValue 鼠标位置 event.x event.y 窗体活动元素  documen

JS代码大全 （都是网上看到 自己整理的）

原文 JS代码大全 (都是网上看到 自己整理的) 事件源对象 event.srcElement.tagName  event.srcElement.type 捕获释放 event.srcElement.setCapture();   event.srcElement.releaseCapture(); 事件按键 event.keyCode  event.shiftKey  event.altKey  event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event