多屏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;  500px; height: 280px; overflow: hidden; position: relative; zoom: 1;
}
.FocusPic .FP_angle {
	 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;  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;  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 {
	 500px; height: 280px; overflow: hidden; float: left;
}
.FocusPic .FP_pic .FP_tit_bg {
	background: rgb(0, 0, 0);  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;  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 sld={$: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)}}};
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=sld.$(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";sld.addEvent(this.scrollContDiv,"mouseover",function(){a.stop()});sld.addEvent(this.scrollContDiv,"mouseout",function(){a.play()});if(this.arrLeftId){this.arrLeftObj=sld.$(this.arrLeftId);if(this.arrLeftObj){sld.addEvent(this.arrLeftObj,"mousedown",function(){a.rightMouseDown()});sld.addEvent(this.arrLeftObj,"mouseup",function(){a.rightEnd()});sld.addEvent(this.arrLeftObj,"mouseout",function(){a.rightEnd()})}};if(this.arrRightId){this.arrRightObj=sld.$(this.arrRightId);if(this.arrRightObj){sld.addEvent(this.arrRightObj,"mousedown",function(){a.leftMouseDown()});sld.addEvent(this.arrRightObj,"mouseup",function(){a.leftEnd()});sld.addEvent(this.arrRightObj,"mouseout",function(){a.leftEnd()})}};if(this.dotListId){this.dotListObj=sld.$(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}}};

箭头图片：

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

如需改变大小需改

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

并调整下方标题显示位置

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

.FocusPic .FP_pic .FP_tit_txt { margin-top: -40px; }