jQuery:带有文本更改的背景幻灯片

jQuery: Background slideshow with text Change

本文关键字：背景 幻灯片 文本 jQuery      更新时间：2023-09-26

我有几个问题：

1.） 使用幻灯片时使用图像或背景更改是否更好，在什么情况下您会使用一个而不是另一个？
2.） 如何让背景更改为不同的图像以及辅助文本，同时保持大文本不变？ 我觉得我正在做的事情可能不是最佳实践......我也希望它连续循环。

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

小提琴：https://jsfiddle.net/jzhang172/xv2vph6c/5/

$(document).ready(function() {
  $('.my-slide').addClass("slide-1");
setInterval(function () {
  $('.my-slide').addClass("slide-1");
     $('.my-slide').removeClass("slide-2");
     $('.my-slide').removeClass("slide-3");
}, 500);
    setInterval(function () {
  $('.my-slide').addClass("slide-2");
  $('.my-slide').removeClass("slide-1");
     $('.my-slide').removeClass("slide-3");
 
}, 1000);
        setInterval(function () {
  $('.my-slide').addClass("slide-3");
  $('.my-slide').removeClass("slide-1");
     $('.my-slide').removeClass("slide-2");
 
}, 1500);
  
});
.my-slide{
  background:url('http://s1.picswalls.com/wallpapers/2014/07/19/candy-wallpapers_110702795_64.jpg') no-repeat;
  height:100vh;
  width:100vw;
  background-size:cover;
  position:relative;
}
body,html{
  margin:0;
  padding:0;
  position:relative;
}
.messages{
  height:100px;
  width:500px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-250px;
  margin-top:-50px;
}
h2{
  color:black;
  font-size:30px;
  text-transform:uppercase;
}
h3{
  color:red;
  font-size:20px;
  text-transform:uppercase;
}
.other-content{
width:100%;
height:500px;
background:blue;
border:3px solid black;}
.slide-1{
 background:url('http://blog.hdwallsource.com/wp-content/uploads/2015/01/candy-wallpaper-5853-6020-hd-wallpapers.jpg');
}
.slide-2{
background:url('http://s1.picswalls.com/wallpapers/2014/07/19/candy-desktop-wallpaper_110659729_64.jpg');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-slide">
<div class="messages">
  <h2>
  This message doesn't change!
  </h2>
  <h3>
  This message Changes!
  </h3>
  </div>
</div>
<div class="other-content">Other content</div>

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

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

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

updated fiddle [1]： https://jsfiddle.net/xv2vph6c/9/

相关文章：