文字版轮播+图片轮播
时间可以自己调整
文字版代码
<style>
.advertise-container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
text-align: center;
}
.advertise-container .advertise-item {
width: 100%;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.advertise-container a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 100px;
color: #000;
font-weight: bold;
text-decoration: none;
font-size: 24px;
animation: pulse 2s ease infinite;
background: transparent;
}
@keyframes pulse {
0% {
color: #000;
}
50% {
color: #f00;
}
100% {
color: #000;
}
}
</style>
<div class="advertise-container">
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位1</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位2</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位3</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位4</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位5</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位6</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位7</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位8</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位9</div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item">广告位10</div>
</a>
</div>
<script>
var advertise = document.querySelectorAll('.advertise-item');
var index = 0;
setInterval(function() {
advertise.forEach(function(item) {
item.style.display = 'none';
})
if (index >= advertise.length) {
index = 0;
}
advertise[index].style.display = 'block';
index++;
}, 2000)
</script>图片版
<style>
.advertise-container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.advertise-container .advertise-item {
width: 100%;
height: 100px;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
.advertise-container a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 100px;
color: #000;
font-weight: bold;
text-decoration: none;
font-size: 24px;
animation: pulse 2s ease infinite;
background: transparent;
text-align: center;
}
.advertise-container img {
width: 100%;
height: 100%;
}
@keyframes pulse {
0% {
color: #000;
}
50% {
color: #f00;
}
100% {
color: #000;
}
}
</style>
<div class="advertise-container">
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位1"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="图片链接" alt="广告位2"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="图片链接" alt="广告位3"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="图片链接" alt="广告位4"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位5"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位6"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位7"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位8"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位9"></div>
</a>
<a href="https://www.baidu.com" target="_blank">
<div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位10"></div>
</a>
</div>
<script>
var advertise = document.querySelectorAll('.advertise-item');
var index = 0;
setInterval(function() {
advertise.forEach(function(item) {
item.style.display = 'none';
})
if (index >= advertise.length) {
index = 0;
}
advertise[index].style.display = 'block';
index++;
}, 2000)
</script>放在任意侧边栏即可
