在縮略圖上更改滑塊圖像。圖像變化一秒鐘然後恢復

我是新來的編碼，並有一個分配，我們需要編寫一個沒有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

在縮略圖上更改滑塊圖像。圖像變化一秒鐘然後恢復

回答

相關問題