vue2.0 实现无缝滚动

最新推荐文章于 2025-06-19 17:12:49 发布

原创最新推荐文章于 2025-06-19 17:12:49 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #轮播 #js

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

8 篇文章

订阅专栏

本文介绍了一种使用Vue.js创建轮播图的方法。通过定义一个包含不同背景颜色和过渡效果的组件，实现了图片轮播的功能，并利用Vue的指令来控制显示逻辑及定时切换。此外，还介绍了如何使用Vue的transition-group进行动画效果的设置。

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

<!DOCTYPE html>

<head>

</head>

<body>

<transition-group tag="ul" name="image">

</li>

</transition-group>

</div>

</div>

var vm = new Vue({

el: '#div',

data() {

return {

mark: 0,

imgArray: [{

backgroundI:"red",

name:1

{

backgroundI:"yellow",

name:2

},{

backgroundI:"green",

name:3

},{

backgroundI:"blue",

name:4

}

]

}

methods:{

loadImg(){

this.mark++;

if(this.mark==this.imgArray.length){

this.mark=0;

}

time(){

var self=this;

this.timeImg=setInterval(()=>{

self.loadImg()

},4000)

stop(index){

this.mark=index;

clearInterval(this.timeImg,200);

this.time()

}

mounted() {

this.time()

})

</script>

<style>

* {

margin: 0;

padding: 0;

list-style: none;

}

.slide {

width: 1024px;

height: 320px;

margin: 0 auto;

margin-top: 50px;

overflow: hidden;

position: relative;

}

.slideshow {

width: 1024px;

height: 320px;

}

li {

position: absolute;

}

.newnew div {

width: 1024px;

height: 320px;

}

.bar {

position: absolute;

width: 100%;

bottom: 10px;

margin: 0 auto;

z-index: 10;

text-align: center;

}

.bar span {

width: 20px;

height: 5px;

border: 1px solid;

background: white;

display: inline-block;

margin-right: 10px;

}

.active {

background: red !important;

}

.image-enter-active {

transform: translateX(0);

transition: all 1.5s ease;

}

.image-leave-active {

transform: translateX(-100%);

transition: all 1.5s ease;

}

.image-enter {

transform: translateX(100%);

}

.image-leave {

transform: translateX(0);

}

</style>

</body>

</html>