在缩略图上更改滑块图像。图像变化一秒钟然后恢复

我是新来的编码，并有一个分配，我们需要编写一个没有jQuery插件的滑块。目前，我的滑块可以工作，但最终的功能，单击缩略图来更改滑块图像效果不佳。在缩略图上更改滑块图像。图像变化一秒钟然后恢复

在恢复到第一张图像之前，图像正确更改并停留一秒钟。我想阻止图像恢复，但无法查明问题。作业的前端可以在这里访问：http://stepworks.shoukochan.com/

任何意见将不胜感激。谢谢。

Javascript：4个滑块图像中的每一个都有一个1到4的数字变量。单击滑块上的向左或向右箭头，从变量中加1或减1。

function photo(x) { 
var image = document.getElementById('image'); 
imageCount = imageCount + x; 
    if(imageCount > 100 && imageCount <200){ 
imageCount = 1; 
}  else if (imageCount > 200 && imageCount <300){ 
imageCount = 2; 
}  else if (imageCount > 300 && imageCount <400){ 
imageCount = 3; 
}  else if (imageCount > 400 && imageCount <500){ 
imageCount = 4; 
} else if (imageCount > 4){ 
imageCount = 1; 
} else if (imageCount < 1){ 
imageCount = 4; 
} 

image.src = "img/img"+ imageCount +".jpg"; 
}

Html：4张图片中的每一张都是缩略图。点击后，一个大数字将被设置为该变量。取决于编号，相应的图像变量将被相应设置。

<section class="photos"> 
     <ul> 
      <li class="one_photo"><a href=""><img OnClick="photo(150)" src="img/1_thumb.jpg" alt="description of photo 1" /></a></li> 
      <li class="one_photo"><a href=""><img OnClick="photo(250)" src="img/2_thumb.jpg" alt="description of photo 2" /></a></li> 
      <li class="one_photo"><a href=""><img OnClick="photo(350)" src="img/3_thumb.jpg" alt="description of photo 3" /></a></li> 
      <li class="one_photo"><a href=""><img OnClick="photo(450)" src="img/4_thumb.jpg" alt="description of photo 4" /></a></li> 
     </ul> 
    </section>

来源

2015-09-24 BlackShock

它看起来是你的问题，为什么不只是做一个简单的开关语句？像这样的东西可能会有所帮助：

switch(x) {  
    case 150: 
     imageCount = 1; 
     break;  
    case 250: 
     imageCount = 2; 
     break;  
    case 350: 
     imageCount = 3; 
     break;  
    case 450: 
     imageCount = 4; 
     break;  
    default: 
     imageCount = 1; 
     break; 
}

来源

2015-09-24 09:44:24 DougIttern

在缩略图上更改滑块图像。图像变化一秒钟然后恢复

回答

相关问题