带缩略图的图片切换,点完缩略图(隔着点)后上一张下一张不同步了
window.onload = function(){
var oSdiv = document.getElementById("div3");
var oImg = document.getElementById("img1");
var oSimg = document.getElementById("img2");
var oLeft = document.getElementById("left");
var oRight = document.getElementById("right");
var oUl = document.getElementById("list");
var aLi = oUl.getElementsByTagName("li");
var aImg = oUl.getElementsByTagName("img");
var arrImg = ["1.jpg","2.jpg","3.jpg","4.jpg"];
var arrZb = ["160","180","200","220"];
var num = 0;
function Tab(){
oImg.src=arrImg[num];
aImg[num].src="fcp_on.png";
}
Tab();
for(var i=0;i<aLi.length;i++){
aLi[i].index=i
aLi[i].onmouseover = function(){
oSdiv.style.display="block";
oSimg.src=arrImg[this.index];
oSdiv.style.left=arrZb[this.index]+"px"
}
aLi[i].onmouseout = function(){
oSdiv.style.display="none";
}
aLi[i].onclick=function(){
for(var i=0;i<arrImg.length;i++){
aImg[i].src="fcp.png"
}
oImg.src=arrImg[this.index];
aImg[this.index].src="fcp_on.png";
}
}
oLeft.onmouseover=function(){
oLeft.style.background="#ccc"
}
oLeft.onmouseout=function(){
oLeft.style.background=""
}
oRight.onmouseover=function(){
oRight.style.background="#ccc"
}
oRight.onmouseout=function(){
oRight.style.background=""
}
oRight.onclick=function(){
num++;
if(num>arrImg.length-1){
num=0;
}
for(var i=0;i<arrImg.length;i++){
aImg[i].src="fcp.png"
}
Tab();
}
oLeft.onclick=function(){
num--;
if(num<0){
num=arrImg.length-1;
}
for(var i=0;i<arrImg.length;i++){
aImg[i].src="fcp.png"
}
Tab();
}
}
pieces
9 years, 2 months ago