Question

我的想法是通过时间动态更改图像，但不起作用。每个框都以不同的图像开头。

var dir_img = ['img1.svg','img2.svg','img3.svg'];

        setInterval(function() {
        $('.box img').each(function(){
            var image = $(this).attr('src').val();
            switch(image) {
                case dir_img[0]:
                    $(this).attr('src',dir_img[1]);
                    $(this).hide().delay(0).fadeIn(0).delay(1000).fadeOut(0);
                    break;
                case dir_img[1]:
                     $(this).attr('src',dir_img[2]);
                    $(this).hide().delay(0).fadeIn(0).delay(1000).fadeOut(0);
                    break;
                case dir_img[2]:
                    $(this).attr('src',dir_img[0]);
                    $(this).hide().delay(0).fadeIn(0).delay(1000).fadeOut(0);
                    break;
                default
            }
        });
        }, 1000);

尝试过两种方式的src

var image = $(this).attr('src').val();
var image = $(this).attr('src');

框和img标签

<div class="box">
    <img src="img1.svg">
 </div>
 <div class="box">
    <img src="img2.svg">
 </div>
 <div class="box">
   <img src="img3.svg">
 </div>

Answer 1

您的代码存在一些问题：

default中的switch州未关闭。
您用作选择器的变量este未定义
$(this).attr('src');在这里是正确的，属性src没有值

修复后，您的代码应该可以正常工作。

注意：当您在每个switch语句中使用相同的表达式（$(este).hide().delay(0).fadeIn(0).delay(1000).fadeOut(0);）时，您可以在交换机外部执行此操作。

Example

使用setinterval和switch语句更改图像

1 个答案: