vue轮播图(原创)

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

 42343  313  查看评论 (14)
分享到微信朋友圈
X
vue轮播图(原创) ie兼容12

这个轮播图功能的代码,为了方便发布,我全部放在了html文件中。

基于vue实现的,无第三方插件。

后期可以将部分html和js拆出来,做轮播组件

data里定义的轮播图属性

// 图片宽
imgWidth:750,
// 指示器
dots:true,
arrow:true,
// 初始播放位置
initIndex:0,
// 是否循环
loop:true,
// 持续时间
duration:0.3,
// 自动播放
auto:true,

如上可以配置的参数以及图片位移可以通过组件通信传递。

如有需要组件化开发(.vue文件格式)的代码,可以评论,我回复封装拆分方法

相关插件-幻灯片和轮播图

HTML5全屏动画幻灯片切换

超炫酷HTML5响应式全屏幻灯片切换
  幻灯片和轮播图
 29478  410

易迅分块jquery焦点图

上下切换、分块展示
  幻灯片和轮播图
 26676  304

jQuery个性化数字焦点图代码

jQuery个性化数字焦点图代码,底部4个焦点数字编码,左右展开,同时展开文字说明
  幻灯片和轮播图
 28878  315

jquery仿QQ音乐精彩推荐的数组方式轮播

这个是通过数组的原理实现的改变数组的排序元素的class也随之更改产生轮播的效果(代码注释很全,修改方便)
  幻灯片和轮播图
 39690  482

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

    284010786 0
    2021/11/5 17:12:35
    我看了一下代码,一个这么简单的轮播图居然写了一大堆代码。。。。。。 回复
    - silly 0
    2021/8/9 13:33:25
    轮播逻辑好像确实有错误,首次轮播时,第一张与第二张一直是一样的,在第二张点击上一页时,显示的仍是第二张图,再次点击,下面的数字为4,这时候才切回了第一张图 回复
    校园百乐聘 0
    2019/8/21 17:04:06
    可以看下你代码吗
        で 香蕉你个布呐呐?0
        2019/9/2 16:12:13
        免费下载的。点下载即可。组件化写法在https://github.com/nanasama/Carousel.git
        南巷孤猫i0
        2020/5/13 11:08:26
        缘分呀 我也叫香蕉你个不呐呐 嘿嘿
    回复
    如果你是雨 0
    2019/6/16 16:25:30
    轮播逻辑有误 有一张图片重复播放
        で 香蕉你个布呐呐?0
        2019/6/24 11:18:19
        那张图是为了实现滚到最后一张图,保证无缝轮播用的。无缝滚动就是这样的逻辑
        forwade0
        2019/8/22 12:00:39
        逻辑是这样但是一张图也不能出现两次呢
        で 香蕉你个布呐呐?0
        2019/8/27 15:56:42
        没有出现两次。第二张模拟无缝衔接。滑到头再返回才会用到。没有同时使用
    回复
    空白 0
    2019/6/15 17:24:37
    HEarTachepsR 0
    2019/5/13 9:23:45
    感谢作者, .vue文件可以给个github地址吗
        で 香蕉你个布呐呐?0
        2019/5/13 15:22:29
        稍等,我github上没发布东西,传好了发给你
        で 香蕉你个布呐呐?0
        2019/5/14 9:49:59
        https://github.com/nanasama/Carousel.git
        HEarTachepsR0
        2019/5/21 16:40:14
        感谢您。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复