Vue-SuperSlide
Vue-SuperSlide(Github) 是 SuperSlide 的 Vue 封装版本，API 配置及使用方法与 SuperSlide 几乎一致，让你能够便捷的在 Vue 工程中使用 SuperSlide。
简介
关于 SuperSlide 的详细介绍可以到 SuperSlide 官方网站 - 大话主席 进行查看。
大话主席的 SuperSlide 是多年以前前端还处于 jQuery 时代我使用的最多的一个插件，它帮我解决了网页中大部分的文字、图片切换轮播等问题，用起来的是特别的顺手，当然现在前端三大框架的火热，已经没有多少人在关注依赖于 jQuery 的插件了，但是我相信 Superslide 的粉丝还是有不少的。
今天提供一个 Superslide 的 Vue 封装版本，同时也逐步将 Superslide 官网上的所有 demo 用例全部示例一遍（目前正在逐步添加），让你能够便捷的在 Vue 工程中使用 Superslide 的全部功能。
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>