成功实现使用radsystem做轮播图

通过询问chartgpt和班上同学的帮忙，目前已经成功做出轮播图
css和js代码分别如下：

<style scoped>    
  
.carousel {    
  position: relative;    
  width: 80%;    
  height: 480px;    
  margin: 0 auto;    
  overflow: hidden;    
  border-radius: 10px; /* 添加边框圆角 */    
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */    
} 
.carousel-content {    
  display: flex;    
  transition: transform 0.5s ease; 
} 
.slide {  
  width: 100%;  
  flex: 0 0 auto;  
  height: 450px;   
  background-size: contain;   
  background-repeat: no-repeat;  
  background-position: center; 
} 
.carousel-controls {    
  position: absolute;    
  top: 50%;    
  transform: translateY(-50%);    
  width: 100%;    
  display: flex;    
  justify-content: space-between;    
  z-index: 1;    
  padding: 0 20px; /* 增加内边距，避免按钮紧贴着边缘 */    
} 
.carousel-controls button {    
  background-color: rgba(255, 255, 255, 0.5); /* 添加半透明背景 */    
  border: none;    
  border-radius: 50%; /* 圆形按钮 */    
  font-size: 24px;    
  width: 50px; /* 设置按钮宽度 */    
  height: 50px; /* 设置按钮高度 */    
  line-height: 50px; /* 垂直居中文字 */    
  text-align: center; /* 水平居中文字 */    
  cursor: pointer;    
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 添加阴影 */    
  transition: background-color 0.3s ease; /* 添加背景色过渡效果 */    
} 
.carousel-controls button:hover {    
  background-color: rgba(255, 255, 255, 0.7); /* 鼠标悬停时改变背景色 */    
} 
.carousel-dots {    
  position: absolute;    
  bottom: 20px;    
  left: 50%;    
  transform: translateX(-50%);    
  display: flex;    
  justify-content: center;    
  z-index: 1; 
} 
.carousel-dots .dot {    
  width: 12px; /* 稍微增大点的大小 */    
  height: 12px;    
  border-radius: 50%;    
  background-color: black; /* 将点的颜色改为黑色 */    
  margin: 0 8px; /* 调整点的间距 */    
  cursor: pointer;    
  transition: background-color 0.3s ease; /* 添加背景色过渡效果 */    
} 
.carousel-dots .dot:hover {    
    background-color: #add8e6; /* 鼠标悬停时点的颜色改为绿色 */    
} 
.carousel-dots .dot.active {    
  background-color: black; /* 当前活动的点颜色仍为黑色 */    
}    
  
</style>

onMounted(() => {  
    const carousel = document.querySelector('.carousel'); const carouselContent = document.querySelector('.carousel-content'); const slides = document.querySelectorAll('.slide'); const dots = document.querySelectorAll('.dot'); let currentIndex = 0; let carouselInterval; // 存储定时器的ID   function showSlide(index) {  
        currentIndex = index;  
        carouselContent.style.transform = `translateX(-${index * 100}%)`;  
    }  
  
    function startCarousel() {  
        carouselInterval = setInterval(() => {  
            nextSlide();  
        }, 3000);  
    }  
  
    function nextSlide() {  
        currentIndex = (currentIndex + 1) % slides.length; showSlide(currentIndex);  
    }  
  
    dots.forEach(dot => {  
        dot.addEventListener('click', function(event) {  
            event.preventDefault(); const index = parseInt(this.getAttribute('data-index')); showSlide(index); clearInterval(carouselInterval); // 点击小圆点时清除定时器以暂停轮播  
        });  
  
        dot.addEventListener('mouseout', function() {  
            startCarousel(); // 鼠标移出小圆点时恢复轮播  
        });  
    }); // 初始时开始轮播   startCarousel();  
});

 

 运行后的结果如图

这里我设置了3张轮播图片，小圆点的背景颜色为黑色，当鼠标悬停时变为绿色，如果鼠标点击或者放在小圆点上则停止轮播，其他的情况下为3秒一张正常轮播。