VueJS轮播图插件Vueslideshow (原创)

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

 41344  344  查看评论 (1)
分享到微信朋友圈
X
 VueJS轮播图插件Vueslideshow (原创) ie兼容10

VueSlideShow - 基于 Vue 的轮播图组件

这是一个在浏览器端使用的且完全基于 VueJS 的轮播图组件,可通过 “组件声明式” 和 “脚本调用式” 两种方法实现轮播图功能。

依赖资源

Vue 2.2.0+

兼容情况

chrome36+, firefox16+, safari9+, edge15+, ie10+。

用法:

有两种使用方法:

  1. 组件声明式

  2. 脚本调用式

两种方法只是在调用形式上略有差别,参数配置完全相同,可根据实际情况和个人喜好选择合适的方式。 

1. 组件声明式:

<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
  
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                autoplay: 5000,
                arrow: true,
                dot: true
            }
        }
    });
</script>

2. 脚本调用式:

<div id="app" style="width:600px;height:300px;"></div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue().VueSlideShow("#app", {
        images: [
            { src: "1.jpg", href: "#1" },
            { src: "2.jpg", href: "#2" },
            { src: "3.jpg", href: "#3" },
            { src: "4.jpg", href: "#4" },
            { src: "5.jpg", href: "#5" }
        ],
        config: {
            effect: "slide",
            autoplay: 5000,
            arrow: true,
            dot: true
        }
    });
</script>

左右滑动效果

<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide"
            }
        }
    });
</script>

淡入淡出效果

<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "fade"
            }
        }
    });
</script>

自定义左右箭头

<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                arrow: [ "#prev", "#next" ]
            }
        }
    });
</script>

自定义下方按钮

<style>
    #custom-dot {
        width: 600px;
        text-align: center;
        margin: 10px 0 20px 0;
    }
    #custom-dot i {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: #aaa;
        border-radius: 50%;
        cursor: pointer;
        margin: 0 10px;
        transition: .2s;
    }
    #custom-dot i.active {
        background: #333;
    }
</style>
<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<div id="custom-dot">
    <i class="active"></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                dot: "#custom-dot"
            }
        }
    });
</script>

隐藏左右箭头

<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                arrow: false
            }
        }
    });
</script>

隐藏下方按钮

<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                dot: false
            }
        }
    });
</script>

自动切换

<div id="app" style="width:600px;height:300px;">
    <vue-slideshow :data="images" :config="config"></vue-slideshow>
</div>
<script src="vue.min.js"></script>
<script src="vue-slideshow.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            images: [
                { src: "1.jpg", href: "#1" },
                { src: "2.jpg", href: "#2" },
                { src: "3.jpg", href: "#3" },
                { src: "4.jpg", href: "#4" },
                { src: "5.jpg", href: "#5" }
            ],
            config: {
                effect: "slide",
                autoplay: 5000
            }
        }
    });
</script>
相关插件-幻灯片和轮播图
  幻灯片和轮播图
 37999  445

jQuery响应式轮播图插件hwSlider

jQuery响应式轮播图插件hwSlider,支持移动端触屏滑动,同时还兼容低版本ie浏览器。
  幻灯片和轮播图
 42600  388

完美左右切换

完美左右切换代码简单容易修改。
  幻灯片和轮播图
 44476  460

jQuery轮播图带切换进度显示

基于jQuery SuperSlide 实现的轮播图带切换进度显示
  幻灯片和轮播图
 20160  225

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

    Dirty 0
    2020/1/7 14:31:03
    图片alt没办法设置吗?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复