css广告定时切换 |css 不自动换行

/* css样式 */

.advertisement {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.advertisement ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.advertisement ul li {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: opacity 1s;
opacity: 0;
}
.advertisement ul li.active {
opacity: 1;
}

大家首先给广告容器设置好宽度和高度，并设置 overflow: hidden 以确保容器内部的广告不会超出范围。接着，大家使用无序列表展示图片，给每个 li 元素设置定位，左边距为 0，上边距也是 0。

设置广告轮播的核心是给每个广告图片设置透明度切换，使用到一个 transition 属性。

具体实现如下：

// JS脚本

var advertisement = document.querySelector('.advertisement');
var advertisementList = document.querySelectorAll('.advertisement ul li');
var index = 0;
setInterval(function () {
// 索引自增
index++;
// 如果索引值超过了广告图片的总数，重置为0
index = index >= advertisementList.length ? 0 : index;
// 将所有广告图片的透明度都设置为0，让每个广告都消失
for (var i = 0; i< advertisementList.length; i++) {
advertisementList[i].classList.remove('active');
}
// 将当前广告的透明度设置为1，让它显示
advertisementList[index].classList.add('active');
}, 3000);

通过设置 setInterval 定时器，让每张广告图片的显示时间相应延长。当该张广告图片显示完毕后，大家将当前广告的透明度设置为 1，让它显示，同时将之前的广告的透明度设置为 0，让它消失。

最后，利用 JavaScript 的封装性，在头部引入并调用即可实现广告自动轮播。