轮播图的制作大全

<div id="app">
        <div class="a" ref="b" @mouseenter="MouseFun('c')" @mouseleave="MouseFun('d')">
           

            //1.图片显示盒子
            <div class="imgBox" :style="{left:`-${leftVal}px`,transition:`${ition}s`}">
                <img :src="item.imgUrl" v-for="(item,index) in imgList" :key="index" />
               
                <img :src="imgList[0].imgUrl" alt="">
            </div>

            //2.按钮
            <div class="leftBtn" @click="throttle(PrevFun)">&larr;</div>  //左按钮
            <div class="rightBtn" @click="throttle(NextFun)">&rarr;</div> //右按钮

             //3.下方选择点击按钮
            <div class="instBox">
                <div @click="instFun(index)" v-for="(item,index) in imgList.length" :key="index"
                    :class="['inst',index==imgShow?'instActv':'']">
                </div>
               
            </div>

       </div>      
</div>    

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                imgList: [
                    {imgUrl: "./img/新闻1.png"},
                    {imgUrl: "./img/新闻2.png"},
                    {imgUrl:"./img/新闻3.png"},
                    {imgUrl:"./img/新闻4.png"},
                    {imgUrl:"./img/新闻1.png"},
                ],
                leftVal: 0, 
                flag: true, 
                start: null, 
                imgWidth: 500, 
                ition: 0.6, 
                imgShow: 0,
            };
        },
        mounted() {

            this.可弟弟() 
            
        },
        methods: {
           
            MouseFun(type) { 
                type == '移入' ? clearTimeout(this.start) : this.可弟弟()
            },
           
            可弟弟() {
                this.start = setInterval(() => {
                    this.NextFun()
                }, 1500)
            },
           
            throttle(fun) {
                if (this.flag) {
                    this.flag = false;
                    fun(); 
                    setTimeout(() => {
                        this.flag = true;
                    }, 650); 
                }
            },
            PrevFun() {
                if (this.leftVal == 0) { 
                    this.ition = 0 
                    this.imgShow = this.imgList.length - 1
                    this.leftVal = this.imgList.length * this.imgWidth 
                    this.$nextTick(() => {	
                        setTimeout(() => { 
                            this.ition = 0.6
                            this.leftVal -= this.imgWidth
                        }, this.ition * 1000)
                    })
                } else { 
                    this.ition = 0.6
                    this.leftVal -= this.imgWidth
                    this.imgShow--
                }
            },
            NextFun() {
                if (this.leftVal == (this.imgList.length - 1) * this.imgWidth) { 
                    this.ition = 0.6
                    this.leftVal += this.imgWidth
                    this.imgShow = 0
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.ition = 0
                            this.leftVal = 0
                        }, this.ition * 1000)
                    })
                } else {
                    this.ition = 0.6
                    this.leftVal += this.imgWidth
                    this.imgShow++
                }
            },
           
            instFun(index) {
                this.ition = 0.6
                this.leftVal = index * this.imgWidth
                this.imgShow = index
            },
        }
    })

class Carousel {
    constructor(selector) {
        this.DOM = document.querySelector(selector);
        this.init();
    }
 
    init() {
        this.slides = Array.from(this.DOM.querySelectorAll('.slide'));
        this.currentSlide = 0;
        this.interval = 3000; // 时间间隔（毫秒）
 
        // 初始化轮播
        this.goToSlide(this.currentSlide);
        setInterval(() => {
            this.nextSlide();
        }, this.interval);
 
        // 监听键盘事件
        document.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowLeft':
                    this.prevSlide();
                    break;
                case 'ArrowRight':
                    this.nextSlide();
                    break;
                default:
                    break;
            }
        });
    }
 
    goToSlide(index) {
        this.slides.forEach((slide, i) => {
            slide.style.display = i === index ? 'block' : 'none';
        });
    }
 
    nextSlide() {
        this.goToSlide((this.currentSlide + 1) % this.slides.length);
        this.currentSlide = (this.currentSlide + 1) % this.slides.length;
    }
 
    prevSlide() {
        this.goToSlide((this.currentSlide - 1 + this.slides.length) % this.slides.length);
        this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
    }
}
 
// 使用方法：
// 假设你的HTML结构如下：
// <div class="carousel" id="carousel">
//   <div class="slide">Slide 1</div>
//   <div class="slide">Slide 2</div>
//   <div class="slide">Slide 3</div>
// </div>
 
const carousel = new Carousel('#carousel');

<div class="carousel">
  <div class="carousel-item active">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="carousel-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="carousel-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <!-- 指示点 -->
  <div class="carousel-indicators">
    <button data-target="0" class="active"></button>
    <button data-target="1"></button>
    <button data-target="2"></button>
  </div>
  <!-- 箭头 -->
  <div class="carousel-arrows">
    <button class="left-arrow">&#10094;</button>
    <button class="right-arrow">&#10095;</button>
  </div>
</div>

.carousel {
  position: relative;
  width: 100%;
  height: 300px; /* 设置轮播图的高度 */
  overflow: hidden;
}
 
.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
 
.carousel-item.active {
  opacity: 1;
}
 
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
 
.carousel-indicators button {
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 2px;
  background-color: #333;
  opacity: 0.5;
  display: inline-block;
  transition: opacity 0.5s ease-in-out;
}
 
.carousel-indicators button.active {
  opacity: 1;
}
 
.carousel-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
 
.carousel-arrows button {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 24px;
  color: #fff;
  opacity: 0.5;
  display: none;
  transition: opacity 0.5s ease-in-out;
}
 
.carousel:hover .carousel-arrows button {
  display: block;
}