轮播图的制作大全
例如该样式:
1.Vue的方法(可实现自动轮播和左右按钮和下方原点按钮轮播)
代码语言:javascript代码运行次数:0运行复制
//1.图片显示盒子
//2.按钮
//3.下方选择点击按钮
:class="['inst',index==imgShow?'instActv':'']">
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
},
}
})这个里面就是放置你要轮播的图片
2.纯js方法
代码语言:javascript代码运行次数:0运行复制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结构如下:
//
//
//
//
//
const carousel = new Carousel('#carousel');你需要确保HTML结构中的轮播图容器有一个ID,并且每个幻灯片都有.slide类。这个类包含了基本的轮播逻辑,如自动播放和响应键盘事件。
3.纯css
假设html代码如下
代码语言:javascript代码运行次数:0运行复制



代码语言:javascript代码运行次数:0运行复制.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;
}以上代码仅供学习与参考