地方网站不让做吗,建设银行网站注销吗,网站服务器可以更换吗,网站建设案例欣赏需求#xff1a;没有找到特别好的上下轮播插件-所以自己写了一个简单的demo
一.上下平滑轮播-移入停止-移出继续轮播
!--* 消息滚动
--
templatediv classnewsdiv idroll classInfoBox mouseoverthi…需求没有找到特别好的上下轮播插件-所以自己写了一个简单的demo
一.上下平滑轮播-移入停止-移出继续轮播
!--* 消息滚动
--
templatediv classnewsdiv idroll classInfoBox mouseoverthis.mouseOver mouseoutthis.mouseOutdiv v-foritem in 5 :keyitem classitem{{ item }}/div/div/div
/templatescript
export default {mounted() {var area document.getElementById(roll);// 多加了一组area.innerHTML area.innerHTML;this.area area;setInterval(this.scroll, 50);},data() {return {area: {},stop: false,scrollItemNumber: 0,};},methods: {scroll() {if (!this.stop) {// this.area.scrollHeight / 2 这是滚动所有元素的高度if (this.area.scrollTop this.area.scrollHeight / 2) {this.area.scrollTop 0;} else {this.area.scrollTop;}}},mouseOver() {this.stop true;},mouseOut() {this.stop false;},},
};
/script
style langscss scoped
.news {margin: 20px;height: 300px;background: aqua;text-align: center;.InfoBox {width: 300px;height: 300px;margin: 0 auto;overflow: hidden;background: rgb(94, 163, 233);.item {margin-top: 30px;padding: 10px;background: rgb(54, 230, 83);text-align: center;cursor: pointer;}}
}
/style二.加了控制条件的上下轮播-我只是写了个demo(我这个控制条件是5s停顿一次 接着轮播)
!--* 消息滚动
--
templatediv classnewsdiv idroll classInfoBox mouseoverthis.mouseOver mouseoutthis.mouseOutdiv v-foritem in 5 :keyitem classitem{{ item }}/div/div/div
/templatescript
export default {mounted() {var area document.getElementById(roll);// 多加了一组area.innerHTML area.innerHTML;this.area area;setInterval(this.scroll, 50);},data() {return {area: {},stop: false,scrollItemNumber: 0,};},methods: {scroll() {// 控制什么时间 停顿一下 我用的是 5s停顿一次 这个可以根据自己需求if (this.scrollItemNumber ! 0 this.scrollItemNumber % 100 0) {this.stop true;setTimeout(() {this.stop false;this.scrollItemNumber 0}, 1000)}if (!this.stop) {this.scrollItemNumberconsole.log(this.scrollItemNumber);// this.area.scrollHeight / 2 这是滚动所有元素的高度if (this.area.scrollTop this.area.scrollHeight / 2) {this.area.scrollTop 0;} else {this.area.scrollTop;}}},mouseOver() {this.stop true;},mouseOut() {this.stop false;},},
};
/script
style langscss scoped
.news {margin: 20px;height: 300px;background: aqua;text-align: center;.InfoBox {width: 300px;height: 300px;margin: 0 auto;overflow: hidden;background: rgb(94, 163, 233);.item {margin-top: 30px;padding: 10px;background: rgb(54, 230, 83);text-align: center;cursor: pointer;}}
}
/style
