vue插件Vue-SuperSlide轮播

Vue-SuperSlide

Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本，API 配置及使用方法与 SuperSlide 几乎一致，让你能够便捷的在 Vue 工程中使用 SuperSlide。

插件官网链接

http://www.superslide2.com/index.html.

Install 安装

CDN

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-superslide/lib/vue-superslide.umd.min.js"></script>

NPM

npm install vue-superslide --save
Mount
import Vue from 'vue'
import VueSuperSlide from 'vue-superslide'

Vue.use(VueSuperSlide)

main.js引入插件

import Vue from 'vue'
import VueSuperSlide from 'vue-superslide'

Vue.use(VueSuperSlide)

index.vue页面使用

<template>
	<div>
		  <superslide :options="options" class="slideBox">
		  <div class="txtMarquee-top">
		  
		  	<div class="bd">
		  		<ul class="infoList">
		  			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
		  			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语：会说中文就能说英语！</a></li>
		  			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
		  			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料？</a></li>
		  			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
		  			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语，上北外！</a></li>
		  			<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
		  		</ul>
		  	</div>
		  </div>
		  </superslide>
	</div>
</template>

<script>
	
	export default {
		data(){
			return {
				  options: {
				          mainCell: ".bd ul",
				          autoPlay: true,
				          effect: "topMarquee",
				          vis: 5,
				          interTime: 50
				   }
			}
		},
		created() {
			
		},
		mounted() {
			
		},
		methods:{
			
		}
	}
</script>

<style>
	 /* css 重置 */
	 * {
	 	margin: 0;
	 	padding: 0;
	 	list-style: none;
	 }
	 
	 body {
	 	background: #fff;
	 	font: normal 12px/22px 宋体;
	 }
	 
	 img {
	 	border: 0;
	 }
	 
	 a {
	 	text-decoration: none;
	 	color: #333;
	 }
	 
	 a:hover {
	 	color: #1974A1;
	 }
	 
	 
	 /* 本例子css */
	 .txtMarquee-top {
	 	width: 450px;
	 	overflow: hidden;
	 	position: relative;
	 	border: 1px solid #ccc;
	 }
	 
	 .txtMarquee-top .hd {
	 	overflow: hidden;
	 	height: 30px;
	 	background: #f4f4f4;
	 	padding: 0 10px;
	 }
	 
	 .txtMarquee-top .hd .prev,
	 .txtMarquee-top .hd .next {
	 	display: block;
	 	width: 9px;
	 	height: 5px;
	 	float: right;
	 	margin-right: 5px;
	 	margin-top: 10px;
	 	overflow: hidden;
	 	cursor: pointer;
	 	/* background: url("./images/arrow.png") 0 -100px no-repeat; */
	 }
	 
	 .txtMarquee-top .hd .next {
	 	background-position: 0 -140px;
	 }
	 
	 .txtMarquee-top .hd .prevStop {
	 	background-position: -60px -100px;
	 }
	 
	 .txtMarquee-top .hd .nextStop {
	 	background-position: -60px -140px;
	 }
	 
	 .txtMarquee-top .bd {
	 	padding: 15px;
	 }
	 
	 .txtMarquee-top .infoList li {
	 	height: 24px;
	 	line-height: 24px;
	 }
	 
	 .txtMarquee-top .infoList li .date {
	 	float: right;
	 	color: #999;
	 }
</style>