Add divto body :
< div id "photo-list" ></ Div >
in JS write the onload method (domain,URLs) incoming image address and domain name, (Minimum of 5 pictures , showing 4 photos )
function initonloadaction (domain,urls,page_id) {
var id = function (EL) {
return document.getElementById (EL);
},
c = ID (' photo-list ');
generate a dynamic picture
var urllist=urls.split (",");
var imghtml= "<ul id= ' scroll ' >" ;
for (var i=0;i<urllist.length;i++) {
imghtml+= "<li> +domain+urllist[i]+ "' width= ' 160px ' height= ' 220px ' alt= '/></li> ' ;
}
imghtml+= "</ul>" ;
c.innerhtml=imghtml;
if (c) {
v AR &NBSP; ul = id ( Span style= "font-family: ' Courier New '; Color:rgb (42,0,255); font-size:13px;" > ' scroll '
lis = ul . getElementsByTagName (' li '),
ItemCount = Lis.length,
width = lis[0].offsetwidth, // get each img width of the container
marquee = function () {
C.scrollleft + = 2;
i F (c.scrollleft % width<=1) { / / when c.scrollleft and width img Append to the last side
ul . appendchild (ulgetelementsbytagname (' li ') [0]);
C.scrollleft = 0;
};
},
Speed =; // The larger the number the slower
ul . style.width = Width*itemcount + ' px ' ; // set container length after loading
var timer = setinterval (marquee, speed);
C.onmouseover = function () {
Clearinterval (timer);
};
c.onmouseout = function () {
Timer = setinterval (marquee, speed);
};
};
}
Adding style controls to CSS
#photo-list {
/ * width of 4 pictures
*/
width:640px;
/ * highly consistent
*/
height : 220px
Overflow:hidden;
}
/* Add other Styles */
#photo-list &NBSP; ul &NBSP, list-style Span style= "font-family: ' Courier New '; Color:rgb (0,0,0); font-size:13px;" >: none
#photo-list &NBSP; li : left
#photo-list img { Border:1px Solid #FFFFFF; background:#fff; padding:2px;}
Picture horizontal scrolling Effect