<script language="javascript" type="text/JavaScript">
 var arrImages = new Array();//大图数组
 var arrImages_s = new Array();//缩略图数组
 var arrPos=0;
 var minSlide=0;
 var count=1;
 var k=0;//当前组索引
 var prevThumb = 0;
 arrImages[0]="/uploadfiles/1105191504241.jpg";
 arrImages_s[0]="/uploadfiles/1105191504241small.jpg";
 arrImages[1]="/uploadfiles/1105191504242.jpg";
 arrImages_s[1]="/uploadfiles/1105191504242small.jpg";
 arrImages[2]="/uploadfiles/1105191504243.jpg";
 arrImages_s[2]="/uploadfiles/1105191504243small.jpg";
 arrImages[3]="/uploadfiles/1105191504244.jpg";
 arrImages_s[3]="/uploadfiles/1105191504244small.jpg";
 arrImages[4]="/uploadfiles/1105191506091.jpg";
 arrImages_s[4]="/uploadfiles/1105191506091small.jpg";
 arrImages[5]="/uploadfiles/1105191506092.jpg";
 arrImages_s[5]="/uploadfiles/1105191506092small.jpg";
 arrImages[6]="/uploadfiles/1105191506093.jpg";
 arrImages_s[6]="/uploadfiles/1105191506093small.jpg";
 arrImages[7]="/uploadfiles/1105191506094.jpg";
 arrImages_s[7]="/uploadfiles/1105191506094small.jpg";
 arrImages[8]="/uploadfiles/1105191511581.jpg";
 arrImages_s[8]="/uploadfiles/1105191511581small.jpg";
 arrImages[9]="/uploadfiles/1105191511582.jpg";
 arrImages_s[9]="/uploadfiles/1105191511582small.jpg";
 arrImages[10]="/uploadfiles/1105191511583.jpg";
 arrImages_s[10]="/uploadfiles/1105191511583small.jpg";
 arrImages[11]="/uploadfiles/1105191511584.jpg";
 arrImages_s[11]="/uploadfiles/1105191511584small.jpg";
 arrImages[12]="/uploadfiles/1105191517331.jpg";
 arrImages_s[12]="/uploadfiles/1105191517331small.jpg";
 arrImages[13]="/uploadfiles/1105191517332.jpg";
 arrImages_s[13]="/uploadfiles/1105191517332small.jpg";
 arrImages[14]="/uploadfiles/1105191517333.jpg";
 arrImages_s[14]="/uploadfiles/1105191517333small.jpg";
 arrImages[15]="/uploadfiles/1105191517334.jpg";
 arrImages_s[15]="/uploadfiles/1105191517334small.jpg";
 arrImages[16]="/uploadfiles/1105191518452.jpg";
 arrImages_s[16]="/uploadfiles/1105191518452small.jpg";
 arrImages[17]="/uploadfiles/1105191518453.jpg";
 arrImages_s[17]="/uploadfiles/1105191518453small.jpg";
 arrImages[18]="/uploadfiles/1105191518454.jpg";
 arrImages_s[18]="/uploadfiles/1105191518454small.jpg";
 arrImages[19]="/uploadfiles/1105191523371.jpg";
 arrImages_s[19]="/uploadfiles/1105191523371small.jpg";
 arrImages[20]="/uploadfiles/1105191518451.jpg";
 arrImages_s[20]="/uploadfiles/1105191518451small.jpg";
 arrImages[21]="";
 arrImages_s[21]="/uploadfiles/toFirst.jpg";
 var maxSlide=21;
 var row1="";
 for(var i=arrPos;i<arrImages.length;i++)
{
if(count>4){break;}
 row1=row1+'<li><img src=\"'+arrImages_s[i]+'\" title=\"点击小图放大\" id="thumb'+i+'" style="cursor:pointer;" width="111" height="61"  /></li>';
 count++;
}
</script>
<script src="/js/imglist.js" type="text/jscript"></script>
<div id=opusBody>
<div id="carousel_photo_container"><div class=shownext><div id="carousel"><img src="/luoai/p_w_picpaths/opus_list_prev.jpg" id="carousel_btn_lastpic" alt="上一组" onClick="prevGroup();" style="cursor:pointer;"/>
<div id="carousel_container">
<ul id="samples_list">
</ul>
</div>
<img src="/luoai/p_w_picpaths/opus_list_next.jpg" id="carousel_btn_nextpic" alt="下一组" onClick="nextGroup();" style="cursor:pointer;"/>
</div></div><div id=opus_show><div class=opus_showmd><i></i><img src="/uploadfiles/1105191504241.jpg"  id="carousel_photo" usemap="#map"  /></div></div></div>
</div>
<script src="/js/imglist.js" type="text/jscript"></script>
SCRIPT language=javascript>
prevGroup();
</SCRIPT>
imglist.js 文件内容
 

 
  
  1. var preid=0;  
  2. function ShowPic(imgurl)  
  3. {  
  4. var p_w_picpath=document.getElementById('carousel_photo')  
  5. p_w_picpath.src=imgurl;  
  6. }  
  7.         function prevSlide()  
  8.         {  
  9.             if(prevThumb-1<minSlide)  
  10.             {  
  11.                return   
  12.             }  
  13.             else{changeThumb(prevThumb-1)}  
  14.         }  
  15.  
  16.         function nextSlide()  
  17.         {  
  18.             if(parseInt(prevThumb)+1>maxSlide)  
  19.             {  
  20.                 return   
  21.             }  
  22.             else 
  23.             {  
  24.                changeThumb(parseInt(prevThumb)+1);  
  25.             }  
  26.         }  
  27.           
  28.         function changeThumb(thumbPos)  
  29.         {  
  30.             if (thumbPos==maxSlide)  
  31.             {  
  32.                 changeThumb(0);  
  33.                 return;  
  34.                   
  35.             }  
  36.             if (thumbPos==0)  
  37.             {  
  38.                 row1="";  
  39.                 count=0;  
  40.                 for(var i=thumbPos;i<arrImages.length;i++)  
  41.                 {  
  42.                 if(count>3){break;}  
  43.                 row1=row1+'<li><img src=\"'+arrImages_s[i]+'\" οnclick=changeThumb("'+i+'") title=\"点击小图放大\" id="thumb'+i+'" style="border:2px solid #000;cursor:pointer;" width="111" height="61"/></li>';  
  44.                 count++  
  45.                 }     
  46.                 k=0  
  47.             }  
  48.             changea();  
  49.             //document.getElementById('thumb'+prevThumb).style.border='2px solid #ffffff';  
  50.             if (document.getElementById('thumb'+thumbPos))  
  51.             {  
  52.               document.getElementById('thumb'+thumbPos).style.border='2px solid #ffffff';  
  53.                prevThumb=thumbPos;  
  54.                loadSlide(thumbPos);  
  55.                preid=thumbPos;  
  56.             }  
  57.             else 
  58.             {  
  59.                 if (preid<thumbPos)  
  60.                 {  
  61.                     nextGroup()  
  62.                       
  63.                 }  
  64.                 else 
  65.                 {  
  66.                     prevGroup()  
  67.                 }  
  68.                  preid=thumbPos;  
  69.             }  
  70.               
  71.         }  
  72.         function loadSlide(slidePos)  
  73.         {  
  74.             var tempImage=arrImages[slidePos];  
  75.             var p_w_picpath=document.getElementById('carousel_photo')  
  76.              p_w_picpath.src=tempImage;  
  77.         }  
  78.         function prevGroup()  
  79.         {  
  80.                 k=k-1  
  81.                 row1="";  
  82.                 if (k<0)  
  83.                 {  
  84.                     k=0;  
  85.                 }  
  86.                 var count1=0;  
  87.                 for(var i=k*4;i<arrImages.length;i++)  
  88.                 {  
  89.                  if(count1>3){break;}  
  90.                  row1=row1+'<li><img src=\"'+arrImages_s[i]+'\" οnclick=changeThumb("'+i+'") title=\"点击小图放大\" id="thumb'+i+'" style="border:2px solid #000;cursor:pointer;" width="111" height="61"/></li>';  
  91.                  count1++;  
  92.                   
  93.                 }  
  94.                 var thispreid=k*4+3;  
  95.                 changea();  
  96.                 if (preid==0)  
  97.                 {  
  98.                   loadSlide(0);  
  99.                   changeThumb(0)  
  100.                 }  
  101.                 else 
  102.                 {  
  103.                   loadSlide(thispreid);  
  104.                   changeThumb(thispreid)  
  105.                 }  
  106.                   
  107.         }  
  108.         function nextGroup()  
  109.         {  
  110.                 row1="";  
  111.                 var count2=0;  
  112.                 k=k+1;  
  113.                 if (k*4>arrImages.length)  
  114.                 {  
  115.                   k=0;  
  116.                 }  
  117.                 for(var i=k*4;i<arrImages.length;i++)  
  118.                 {  
  119.                  if(count2>3){break;}  
  120.                  row1=row1+'<li><img src=\"'+arrImages_s[i]+'\" οnclick=changeThumb("'+i+'") title=\"点击小图放大\" id="thumb'+i+'" style="border:2px solid #616064;cursor:pointer;" width="111" height="61"/></li>';  
  121.                  count2++;  
  122.                    
  123.                 }  
  124.                 changea();  
  125.                 loadSlide(k*4);  
  126.                 changeThumb(k*4);  
  127.         }  
  128. function changea(){  
  129. document.getElementById('samples_list').innerHTML=row1;  
  130. }