Multi-screen JS slide

HTML code

<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" >

</A>
</DIV>
<div class= "FP_TIT_BG" ></DIV>
<div class= "Fp_tit_txt" ><a href= "#" target= "_blank" > First picture </A></DIV>
<div class= "Fp_tit_ico" ></DIV></DIV>

<div class= "Fp_pic" >
<div><a href= "#" target= "_blank" >Src= "Img/a2.jpg" galleryimg= "no" ></A></DIV>
<div class= "FP_TIT_BG" ></DIV>
<div class= "Fp_tit_txt" ><a href= "#"
target= "_blank" > Second picture </A></DIV>
<div class= "Fp_tit_ico" ></DIV></DIV>
<div class= "Fp_pic" >
<div><a href= "#" target= "_blank" >Src= "Img/a3.jpg" galleryimg= "no" ></A></DIV>
<div class= "FP_TIT_BG" ></DIV>
<div class= "Fp_tit_txt" ><a href= "#"
target= "_blank" > Third picture </A></DIV>
<div class= "Fp_tit_ico" ></DIV></DIV>
<div class= "Fp_pic" >
<div><a href= "#" target= "_blank" >Src= "Img/a4.jpg" galleryimg= "no" ></A></DIV>
<div class= "FP_TIT_BG" ></DIV>
<div class= "Fp_tit_txt" ><a href= "#"
target= "_blank" > Fourth picture </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:al PHA (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; filte R: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, san S-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; positi On: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 Code:

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 (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=";d omain= "+i};d ocument.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 ("must specify Scrollcontid."); return};this.scrollcontdiv=sina.$ (This.scrollcontid); if (!this.scrollcontdiv) {throw new Error ("Scrollcontid is not correctThe object. (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) +" page "; 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};vara=this;this._state= "floating"; This._scrolltimeobj=setinterval (function () {a.moveleft ()},this.speed)}; Scrollpic.prototype.rightmousedown=function () {if (this._state!= "ready") {Return};vara=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); vara=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); vara=-this.scrollcontdiv[(this.upright? ') ScrollTop ': ' ScrollLeft ')]%this.pagewidth;this.move (a)}; Scrollpic.prototype.move=function (A, b) {varC=this;varD=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); . _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} }};

Arrow Image:

Image size: width:500px; height:280px;

If you need to change the size

Focusscroll_01.framewidth     = $;  Focusscroll_01.pagewidth      = 500;. Focuspic  {width:500px; height:280px;}. Focuspic. fp_pic {width:500px; height:280px;}

and adjust the position below the title display

. Focuspic. Fp_pic. FP_TIT_BG {margin-top: -70px;}. Focuspic. Fp_pic. fp_tit_txt {margin-top: -40px;}

Multi-screen JS slide