vue.js实现基于图像的旋转效果

转盘效果图：



1.html










{ { } }

















2.js



出口默认{
组成：{
}，
就绪：函数（）{
无功_this =这；
VaR定时器= setInterval（）函数（）{
如果（_this。shufflingid > = 0_this。shufflingid < _this。shufflingdata。length-1）{
_this。shufflingid = parseInt（_this。shufflingid）+ 1；
}
如果（_this。shufflingid = = _this。shufflingdata。length-1）{
_this shufflingid = 0；
}
}，5000）
}，
方法：{
bulletfunone：函数（）{
这shufflingid = 0；
}，
bulletfuntwo：函数（）{
这shufflingid = 1；
}，
bulletfunthree：函数（）{
这shufflingid = 2；
}，
showprenext：函数（）{
这prenext =真；
}，
HiddenPreNext：函数（）{
这prenext = false；
}，
PreFun：函数（）{
无功_this =这；
如果（_this。shufflingid > 0_this。shufflingid < _this。shufflingdata。长度）{
_this。shufflingid = parseInt（_this。shufflingid）- 1；
}
}，
NextFun：函数（）{
无功_this =这；
如果（_this。shufflingid > = 0_this。shufflingid < _this。shufflingdata。length-1）{
_this。shufflingid = parseInt（_this。shufflingid）+ 1；
}
}
}，
数据（）{
返回{
shufflingdata：{ {
标题：'meow米，
链接：1，
网址： / / / XX XXX src / / 1 PNG的IMG。
}，
{
标题：'beans，
链接：2，
网址： / / / XX XXX src / / 2 PNG的IMG。
{ }。
标题：猫咪咪，
链接：3，
网址： / / / XX XXX src / / 3为IMG。
} }，
shufflingid：0，
prenext：假，
}
}
}




3.css




{。焦点
职位：相对；
左：380px；
溢出：隐藏；
身高：570px；
宽度：1100px；
}
{。FL
浮点数：左；
}
焦点{。
溢出：隐藏；
}
{重点UL。
位置：绝对；
}
fouce UL Li {。
浮点数：左；
}
主要a.img { ul。
显示块；
身高：520px；
}
ShowImg {。
宽度：1440px；
左：- 0px；
}
ShowImg { IMG。
显示块；
宽度：1100px；
身高：520px；
}
fouce.bullet-pagination {。
位置：绝对；
底部：50px；
}
fouce UL Li h3 {。
身高：40px；
行高：40px；
背景颜色：# ededed；
文本对齐：中心；
字体大小：25px；
宽度：1100px；
}
{子弹分页。
宽度：100%；
文本对齐：中心；
16px垫上；
清楚：两者；
溢出：隐藏；
}
{。子弹
显示：内联块；
背景：# FFF；
宽度：12px；
身高：12px；
边界半径：6px；
WebKit的边界半径：6px；
右边距：5px；
不透明性：0.8；
WebKit的过渡：透明度0.8s线性；
-moz过渡：透明度0.8s线性；
MS：透明度0.8s线性过渡；
- O转换：透明度0.8s线性；
过渡：透明度0.8s线性；
}
{。bullet.active
背景：# 007cdb；
不透明性：1；
光标：指针；
}
{。prenext
显示块；
宽度：31px；
身高：41px；
位置：绝对；
上图：200px；
光标：指针；
}
{。预
Background: URL ('/xxx/xx/src/img/news_arr_r.png') no-repeat right center;
}
{。下
背景：URL（ / / / XX XXX / / news_arr_r IMG SRC。png）没有重复左中心；
右：0px；
}
{ *
填充：0；
保证金：0；
列表样式：无；
}
一个{
文字装饰：无；
}




这篇文章已经整理的vue.js前端组件的学习课程

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。