3个不同类之间的转换

Question

我希望我的网站在显示以下三种不同的文本集之间过渡，但我不知道从哪里开始。这个想法是，它最初会说:你的慈善机构365年合作伙伴

则会交换为:你的教育365年合作伙伴

如果有人能帮助我在正确的方向，谢谢你。

<section>
<div class="containerBody">
<div class="BodyImages"> 
<div class="banner-top-mob d-lg-none"><img src="/images/BannerImage1.jpg" class="img-fluid"></div>
<div class="banner-bottom-mob d-lg-none"><img src="/images/BannerImage2.jpg" class="img-fluid"></div>
</div>
<div class="tes-banner__slider p-4 mt-4 mt-md-0 pb-xl-8">
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Charity</span><br>
365 Partner
</h2>
<p>We've been implementing Microsoft Dynamics 365 into not-for-profit organisations and the public sector for decades. As a result, our team of experts really do understand the complexities and challenges that you face as a sector.</p>
<a href="/charity" class="btn btn-outline-blue mt-3">Discover</a>
</div>
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Education</span><br>
365 Partner
</h2>
<p>Schools and academies are small businesses, which need robust financial systems. We offer you the ideal solution to manage the end-to-end operations of your school or academy.</p>
<a href="/education" class="btn btn-outline-blue mt-3">Find out more</a>
</div>
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Commercial</span><br>
365 Partner
</h2>
<p>Whatever your industry sector, the pace of business is constantly changing. Dynamics 365 allows you to streamline your processes, make smarter decisions and accelerate business growth, all the while connecting all key parts of your organisation.</p>
<a href="/contact" class="btn btn-outline-blue mt-3">Get in touch</a>
</div>

</div>
</div>
</section>

Answer 1

您需要添加javascript才能使其工作。使用setInterval，您可以使该函数每隔几秒运行一次。

var sections = [
document.getElementById("section1"),
document.getElementById("section2"),
document.getElementById("section3")
]
var on = 0
setInterval(function() {
sections[on].style.display = "none"
on += 1
if (on == sections.length) {
on = 0
}
sections[on].style.display = "block"
}, 1000) // The number is the time (in milliseconds) for each flip

#seciont1 {
display: block;
}
#section2,
#section3 {
display: none;
}

<section>
<div class="containerBody">
<div class="BodyImages">
<div class="banner-top-mob d-lg-none"><img src="/images/BannerImage1.jpg" class="img-fluid"></div>
<div class="banner-bottom-mob d-lg-none"><img src="/images/BannerImage2.jpg" class="img-fluid"></div>
</div>
<div class="tes-banner__slider p-4 mt-4 mt-md-0 pb-xl-8">
<div class="tes-banner__content p-1" id="section1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Charity</span><br> 365 Partner
</h2>
<p>We've been implementing Microsoft Dynamics 365 into not-for-profit organisations and the public sector for decades. As a result, our team of experts really do understand the complexities and challenges that you face as a sector.</p>
<a href="/charity" class="btn btn-outline-blue mt-3">Discover</a>
</div>
<div class="tes-banner__content p-1" id="section2">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Education</span><br> 365 Partner
</h2>
<p>Schools and academies are small businesses, which need robust financial systems. We offer you the ideal solution to manage the end-to-end operations of your school or academy.</p>
<a href="/education" class="btn btn-outline-blue mt-3">Find out more</a>
</div>
<div class="tes-banner__content p-1" id="section3">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Commercial</span><br> 365 Partner
</h2>
<p>Whatever your industry sector, the pace of business is constantly changing. Dynamics 365 allows you to streamline your processes, make smarter decisions and accelerate business growth, all the while connecting all key parts of your organisation.</p>
<a href="/contact" class="btn btn-outline-blue mt-3">Get in touch</a>
</div>
</div>
</div>
</section>

改变1000以改变每次翻转之间的时间量。它的单位是毫秒，所以1000等于1秒。