html 左右轮播代码

HTML 左右轮播是网页设计中常用的一种效果，可以实现图片或文本在页面上左右滑动的效果。下面介绍一种基于 HTML 和 CSS 的简单的左右轮播代码示例。

!--HTML结构-->
    div class="carousel">
    ul class="carousel-list">
    li>
    img src="img1.jpg" alt="img1">
    /li>
    li>
    img src="img2.jpg" alt="img2">
    /li>
    li>
    img src="img3.jpg" alt="img3">
    /li>
    li>
    img src="img4.jpg" alt="img4">
    /li>
    /ul>
    /div>

首先我们需要在 HTML 中用 ul 和 li 标签来构建轮播图的图片列表，然后使用 CSS 来对其进行样式设置。

.carousel-list {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.carousel-list li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.carousel-list li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}
.carousel-list {
    width: 400%;
    left: -100%;
    position: absolute;
    transition: all 0.5s ease;
}
.carousel-list li {
    display: inline-block;
    float: left;
}
    

上述 CSS 代码中，我们对轮播图容器和图片列表的样式进行了设置，其中使用了 position、width、height 等属性控制图片列表的显示方式和大小，使用 overflow 属性来隐藏容器多余部分，将图片调整为覆盖整个容器，并使用 object-fit 属性来控制图片显示方式。另外在.carousel-list 类中还设置了宽度为 400%，left 值为 -100% 的实现轮播的效果，使用 transition 来实现动画效果，.carousel-list li 类设置为 inline-block 和 float: left，使得图片水平排列。

最后加入 JavaScript 代码实现图像的自动轮播功能。

script>
    let carouselList = document.querySelector('.carousel-list');
    let carouselIndex = 0;
    let carouselTimer;
//图片轮播函数function showNext() {
    if (carouselIndex >
= 4) {
    carouselIndex = 0;
}
    carouselIndex++;
    carouselList.style.left = -carouselIndex * 100 + '%';
    carouselTimer = setTimeout(showNext, 5000);
}
//开启轮播function startCarousel() {
if (carouselTimer) {
    clearTimeout(carouselTimer);
}
    carouselTimer = setTimeout(showNext, 5000);
}
//结束轮播function stopCarousel() {
if (carouselTimer) {
    clearTimeout(carouselTimer);
}
}
    startCarousel();
    /script>
    

代码中的 showNext() 函数控制轮播图的滚动效果，startCarousel() 开启自动轮播，stopCarousel() 则停止轮播。最后通过调用 startCarousel() 开启自动轮播功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！