vue搭建的图片轮播

所属分类:媒体-幻灯片和轮播图

 54867  364  查看评论 (6)
分享到微信朋友圈
X
vue搭建的图片轮播 ie兼容12

使用方法

引入vue库

<script src="js/vue.min.js"></script>

创建vue实例,data里面存放轮播图的路径
此插件应用了一些vue的简单的事件绑定,列表循环以及显示隐藏
同时为了使图片轮播交互效果更好,还使用了<transition-group>过渡(vue官网有详细介绍)
可以在标签内设置 enter-active-class 和 leave-active-class来产生轮播平滑的效果
或者可以在css中设置:(设置的transition-group的name="image")

.image-enter-active{}
.image-leave-active{}
.image-enter{}
.image-leave{
相关插件-幻灯片和轮播图

jQuery带缩略图的轮播

通过点击缩略图或点击缩略图左右按钮进行切换
  幻灯片和轮播图
 65460  537

anoSlide演示8种焦点图轮播效果

anoSlide演示8种焦点图轮播效果
  幻灯片和轮播图
 28212  328

3D效果左右箭头轮播的js幻灯片特效代码

效果不错的一款js幻灯片特效代码,支持3D立体效果轮播,带左右箭头按钮控制幻灯图播放,支持幻灯图标题,js代码简单易改,比用flash幻灯特效好用得多,自行修改也容易。
  幻灯片和轮播图
 60140  495

点击左右箭头滚动

点击滚动JQ插件,可自动滚动,可配置滚动速度,滚动个数等参数
  幻灯片和轮播图
 48119  386

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Nixiak 0
    2022/2/15 17:20:53
    最后一个播放完 会有一个空白时间 回复
    Nixiak 0
    2022/2/15 17:20:05
    最后一张播放完 到第一张的时候会有空白时间 回复
    foidite 0
    2021/1/5 10:08:46
    这个被撞一下的效果很可爱啊~~ 回复
    陈某2 0
    2018/6/17 12:30:35
    压缩包错误??!!! 回复
    依依的海燕 0
    2018/5/15 19:08:17
    good
        ^_^0
        2018/8/27 18:01:55
        用脚手架安装的Vue,用了这个代码6个错误,2个警告,你怎么使用的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复