Question

我是编码的新手，并且我们需要在没有jquery插件的情况下编写滑块代码。目前，我的滑块工作，但最后的功能，单击缩略图更改滑块图像不能正常工作。

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

任何建议都将不胜感激。谢谢。

Javascript：4个滑块图像中的每一个都有一个1到4的数字变量。单击滑块上的左箭头或右箭头可以从变量中添加或减去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>

Answer 1

看起来你的条件是一个问题，为什么不做一个简单的switch语句？这样的事情可能有所帮助：

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; 
}

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

1 个答案: