Swiper制作轮播图

类似Bootstrap框架中的carousel

目前做轮播图应用最广的是Swiper

网页中有很多很强大的功能

这边只展示一行配置项的代码

var mySwiper = new Swiper('.swiper-container', {
    autoplay: true, //自动轮播
    loop: true, //无缝循环
    mousewheel: true, //鼠标滚轮控制
    keyboard: true, //键盘左右键控制
    //切换时的效果： 可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
    effect: 'cube',
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});
​
//鼠标覆盖停止自动切换
mySwiper.el.onmouseover = function () {
    mySwiper.autoplay.stop();
}
​
//鼠标离开开始自动切换
mySwiper.el.onmouseout = function () {
    mySwiper.autoplay.start();
}