Question

我有几个问题：

1。）使用幻灯片时更好地使用图像或背景更改，在哪种情况下，您可以使用幻灯片？ 2.）如何在保持大文字相同的同时将背景更改为不同的图像以及辅助文本？我觉得我正在做的事情可能不是最佳做法...我也想让它不断循环。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

updated fiddle

a = Math.toRadians(a); [1]：@zekel

jQuery：带文字的背景幻灯片改变

1 个答案: