HTML/CSS轮播图动态切换与触控滑动控制详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_61706112/article/details/122984540

本文详细介绍了如何使用HTML和CSS实现一个响应式的轮播图，包括定时自动播放、无缝切换，以及触控滑动控制功能。通过classList操作和触屏事件处理，展示了前端开发中CSS3动画与交互的结合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、基本结构

1. html

<div class="banner">
    <ul class="lunbo clearfix">
        <li><a href="#"><img src="uploads/banner3.jpg"></a></li>
        <li><a href="#"><img src="uploads/banner1.jpg"></a></li>
        <li><a href="#"><img src="uploads/banner2.jpg"></a></li>
        <li><a href="#"><img src="uploads/banner3.jpg"></a></li>
        <li><a href="#"><img src="uploads/banner1.jpg"></a></li>
    </ul>
    <ul class="dot">
        <li class="current"></li>
        <li></li>
        <li></li>
    </ul>
</div>

2. css

*{
  padding: 0;
  margin: 0;
}
ul {
  list-style: none;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.banner {
  position: relative;
  overflow: hidden;
}
.lunbo img {
  width: 100%;
}
.lunbo {
  position: relative;
  left: -100%;
  width: 500%;
}
.lunbo li {
  float: left;
  width: 20%;
}
.dot {
  position: absolute;
  right: 0;
  bottom: 8px;
}
.dot li {
  float: left;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  margin-right: 5px;
  background-color: #fff;
  transition: all .3s;
}
.dot li.current {
  width: 12px;
}

二、功能

1. 设置定时器自动播放轮播图 + 无缝对接

注意：监听transitionend事件以便于实现无缝对接

classList的使用：

（1）element.classList.add('class名') --增添class类名

（2）element.classList.remove('class名') --删除class类名

（3）element.classList.toggle('class名') --切换class类名

var banner = document.querySelector('.banner');
var lunbo = banner.children[0];
var dot = document.querySelector('.dot');

var bannerWidth = banner.offsetWidth;
var bannerIndex = 0;

var timer = setInterval(function(){
    bannerIndex++;
    var move = -bannerIndex * bannerWidth;
    lunbo.style.transition = 'all .3s';
    lunbo.style.transform = 'translateX('+ move +'px)';
}, 1000);
lunbo.addEventListener('transitionend', function(){
    if(bannerIndex >= lunbo.children.length - 2) {
        bannerIndex = 0;
        var move = -bannerIndex * bannerWidth;
        lunbo.style.transition = 'none';
        lunbo.style.transform = 'translateX('+ move +'px)';
    } else if(bannerIndex < 0) {
        bannerIndex = lunbo.children.length - 3;
        var move = -bannerIndex * bannerWidth;
        lunbo.style.transition = 'none';
        lunbo.style.transform = 'translateX('+ move +'px)';
    }
    dot.querySelector('.current').classList.remove('current');
    dot.children[bannerIndex].classList.add('current');
})

2. 滑动轮播图

（1）实现拖动效果

var startX = 0;
var moveX = 0;
var flag = false; //用于检测用户是否没有移动
banner.addEventListener('touchstart', function(e){
    startX = e.targetTouches[0].pageX;
    clearInterval(timer);
})
banner.addEventListener('touchmove', function(e) {
    moveX = e.targetTouches[0].pageX - startX;
    var move = -bannerIndex * bannerWidth + moveX;
    lunbo.style.transition = 'none';
    lunbo.style.transform = 'translate('+ move +'px)';
})

（2）通过滑动范围的大小进行下一张图的展示（回弹或下一张）

banner.addEventListener('touchend', function(e) {
    if(flag) {
        if(Math.abs(moveX) > 50) {
            if(moveX > 0) {
                bannerIndex--;
            }else {
                bannerIndex++;
            }
            var move = -bannerIndex * bannerWidth;
            lunbo.style.transition = 'all .3s';
            lunbo.style.transform = 'translate('+ move +'px)';
            }else {
                var move = -bannerIndex * bannerWidth;
                lunbo.style.transition = 'all .1s';
                lunbo.style.transform = 'translate('+ move +'px)';
            }
    }
    clearInterval(timer);
    timer = setInterval(function(){
        bannerIndex++;
        var move = -bannerIndex * bannerWidth;
        lunbo.style.transition = 'all .3s';
        lunbo.style.transform = 'translateX('+ move +'px)';
    }, 1000);
})