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
>
* {
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
;
}
.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
;
}
.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
>
