#减速轮播图实现方法
VUE组件开发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background-color: #222121;
}
* {
margin: 0;
padding: 0;
}
.rotationBox {
width: 700px;
min-width: 700px;
height: 500px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
ul {
list-style-type: none;
position: absolute;
width: 3500px;
}
li {
float: left;
width: 20%;
}
ul li img {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div class="rotationBox">
<ul id="app">
<li v-for="item in imgList"><img v-bind:src="item[0]" /></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
imgList: [['./images/001.jpg', '#'], ['./images/002.jpg', '*'], ['./images/003.jpg', '$'], ['./images/004.jpg', '&'], ['./images/001.jpg', '#']],
speed: 10,
iPosition: -700,
count: 1
},
methods: {
scrollImg: function() {
let timer;
if (this.count > 4) {
this.count = 1;
this.$el.style.left = 0 + 'px';
}
clearInterval(timer);
// 核心代码块
timer = setInterval(() => {
let iTarget = this.$el.offsetLeft;
let move = (this.iPosition * this.count - iTarget) / 10;
move = move > 0 ? Math.ceil(move) : Math.floor(move);
if (this.iPosition * this.count == iTarget) {
this.count++;
clearInterval(timer);
setTimeout(() => {
this.scrollImg();
}, 1000);
}
this.$el.style.left = iTarget + move + 'px';
}, 50);
}
},
mounted: function() {
this.scrollImg();
}
});
</script>
</body>
</html>
1339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
