Javascript jQuery：带文本更改的背景幻灯片

我有几个问题：

1.）在使用幻灯片时使用图像或背景更改是否更好，在什么情况下，您会使用其中一种方式而不是另一种方式？
2.）如何使背景与次要文本一起更改为不同的图像，同时保持大文本不变？我觉得我所做的可能不是最佳实践……而且我希望它不断循环

我刚刚开始学习jquery和javascript，我知道有很多插件可以实现这一点，但我想尽可能简单地学习如何实现这一点

小提琴：

$（文档）.ready（函数（）{
$（'.my slide'）.addClass（“slide-1”）；
setInterval（函数（）{
$（'.my slide'）.addClass（“slide-1”）；
$（“.my slide”）.removeClass（“slide-2”）；
$（“.my slide”）.removeClass（“slide-3”）；
}, 500);
setInterval（函数（）{
$（'.my slide'）.addClass（“slide-2”）；
$（“.my slide”）.removeClass（“slide-1”）；
$（“.my slide”）.removeClass（“slide-3”）；
}, 1000);
setInterval（函数（）{
$（'.my slide'）.addClass（“slide-3”）；
$（“.my slide”）.removeClass（“slide-1”）；
$（“.my slide”）.removeClass（“slide-2”）；
}, 1500);
})；

。我的幻灯片{
背景：url（'http://s1.picswalls.com/wallpapers/2014/07/19/candy-wallpapers_110702795_64.jpg")不重复;；
高度：100vh；
宽度：100vw；
背景尺寸：封面；
位置：相对位置；
}
正文，html{
保证金：0；
填充：0；
位置：相对位置；
}
.留言{
高度：100px；
宽度：500px；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
左边距：-250px；
利润上限：-50px；
}
氢{
颜色：黑色；
字体大小：30px；
文本转换：大写；
}
h3{
颜色：红色；
字体大小：20px；
文本转换：大写；
}
.其他内容{
宽度：100%；
高度：500px；
背景：蓝色；
边框：3px纯黑；}
.幻灯片-1{
背景：url（'http://blog.hdwallsource.com/wp-content/uploads/2015/01/candy-wallpaper-5853-6020-hd-wallpapers.jpg');
}
.幻灯片-2{
背景：url（'http://s1.picswalls.com/wallpapers/2014/07/19/candy-desktop-wallpaper_110659729_64.jpg');
}

此消息不会更改！
此消息将更改！
其他内容

出于学习目的，可以。但尽量避免调用多个间隔，这里的问题是您没有根据幻灯片的更改更改文本。您必须将一些文本传递给特定的幻灯片

请查找以下更新的小提琴：

<div class="my-slide">
       <div class="messages">
         <h3>
            dynamic text goes here
        </h3>
     </div>
   </div>
 <div class="other-content">Other content</div>


$(document).ready(function() {

  $('.my-slide').addClass("slide-1");
setInterval(function () {
  $('.my-slide').addClass("slide-1").find('.messages h3').text("text");
     $('.my-slide').removeClass("slide-2");
     $('.my-slide').removeClass("slide-3");
}, 500);

    setInterval(function () {
  $('.my-slide').addClass("slide-2").find('.messages h3').text("changing");;
  $('.my-slide').removeClass("slide-1");
     $('.my-slide').removeClass("slide-3");

}, 1000);

        setInterval(function () {
  $('.my-slide').addClass("slide-3").find('.messages h3').text("changed");;
  $('.my-slide').removeClass("slide-1");
     $('.my-slide').removeClass("slide-2");

}, 1500);

});

这里是动态文本
其他内容
$（文档）.ready（函数（）{
$（'.my slide'）.addClass（“slide-1”）；
setInterval（函数（）{
$（'.my slide'）.addClass（“slide-1”）.find（'.messages h3'）.text（“text”）；
$（“.my slide”）.removeClass（“slide-2”）；
$（“.my slide”）.removeClass（“slide-3”）；
}, 500);
setInterval（函数（）{
$（'.my slide'）.addClass（“slide-2”）.find（'.messages h3'）.text（“changing”）；；
$（“.my slide”）.removeClass（“slide-1”）；
$（“.my slide”）.removeClass（“slide-3”）；
}, 1000);
setInterval（函数（）{
$（'.my slide'）.addClass（“slide-3”）.find（'.messages h3'）.text（“changed”）；；
$（“.my slide”）.removeClass（“slide-1”）；
$（“.my slide”）.removeClass（“slide-2”）；
}, 1500);
});

更新的小提琴

[1]：