jQuery幻灯片轮播图插件meSlider

jQuery幻灯片轮播图插件meSlider

web端图片轮播插件meSlider,兼容性好,修改方便,如果您要修改轮播图大小请修改meSlider.css中宽和高。

meSlider.css样式

1
2
3
4
5
6
7
.slider {
    width: 600px;
    height: 300px;
    margin: 40px auto 0;
    overflow: hidden;
    position: relative
}

在修改js中vWidth: 600,宽度值即可。

HTML结构

1
<div id="slider" ></div>

JS代码

1
2
3
4
5
6
7
8
9
10
// IE 9 可以轮播,同时缺少轮播动画
$(function() {
    $('#slider').sliders({
        imgArr: ['./resource/banner1.jpg', './resource/banner2.jpg', './resource/banner3.jpg'],
        autoLoop: true,
        current: 1,
        time: 4000, //切换间隔时间
        vWidth: 600 //图片宽度
    })
});
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论