<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 文件内容
- var preid=0;
- function ShowPic(imgurl)
- {
- var p_w_picpath=document.getElementById('carousel_photo')
- p_w_picpath.src=imgurl;
- }
- function prevSlide()
- {
- if(prevThumb-1<minSlide)
- {
- return
- }
- else{changeThumb(prevThumb-1)}
- }
- function nextSlide()
- {
- if(parseInt(prevThumb)+1>maxSlide)
- {
- return
- }
- else
- {
- changeThumb(parseInt(prevThumb)+1);
- }
- }
- function changeThumb(thumbPos)
- {
- if (thumbPos==maxSlide)
- {
- changeThumb(0);
- return;
- }
- if (thumbPos==0)
- {
- row1="";
- count=0;
- for(var i=thumbPos;i<arrImages.length;i++)
- {
- if(count>3){break;}
- 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>';
- count++
- }
- k=0
- }
- changea();
- //document.getElementById('thumb'+prevThumb).style.border='2px solid #ffffff';
- if (document.getElementById('thumb'+thumbPos))
- {
- document.getElementById('thumb'+thumbPos).style.border='2px solid #ffffff';
- prevThumb=thumbPos;
- loadSlide(thumbPos);
- preid=thumbPos;
- }
- else
- {
- if (preid<thumbPos)
- {
- nextGroup()
- }
- else
- {
- prevGroup()
- }
- preid=thumbPos;
- }
- }
- function loadSlide(slidePos)
- {
- var tempImage=arrImages[slidePos];
- var p_w_picpath=document.getElementById('carousel_photo')
- p_w_picpath.src=tempImage;
- }
- function prevGroup()
- {
- k=k-1
- row1="";
- if (k<0)
- {
- k=0;
- }
- var count1=0;
- for(var i=k*4;i<arrImages.length;i++)
- {
- if(count1>3){break;}
- 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>';
- count1++;
- }
- var thispreid=k*4+3;
- changea();
- if (preid==0)
- {
- loadSlide(0);
- changeThumb(0)
- }
- else
- {
- loadSlide(thispreid);
- changeThumb(thispreid)
- }
- }
- function nextGroup()
- {
- row1="";
- var count2=0;
- k=k+1;
- if (k*4>arrImages.length)
- {
- k=0;
- }
- for(var i=k*4;i<arrImages.length;i++)
- {
- if(count2>3){break;}
- 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>';
- count2++;
- }
- changea();
- loadSlide(k*4);
- changeThumb(k*4);
- }
- function changea(){
- document.getElementById('samples_list').innerHTML=row1;
- }
转载于:https://blog.51cto.com/hlhcto/569359