素材牛

基于jQuey实现的图片轮播插件

 所属分类:网页特效-焦点图/幻灯片

 浏览:199次-  下载:4次-  评论:1次-  发布时间:2019-05-28
基于jQuey实现的图片轮播插件兼容IE11
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:基于jquey实现的轮播插件(支持左右箭头、圆点按钮、触摸切换、自动轮播)简单易用
 标签:轮播

详细介绍

这是一款使用jquery实现的轮播插件,支持左右箭头切换,触摸切换,轮播点显示,自动轮播,代码注释全面,代码易修改,简单的语法。

使用时只需要引入css及js相关文件,并在html写一个容器,配置构造实例的参数启用。

html:

css:


js:

/**
 * 参数:
 * 1.最外层父元素  必填项
 * 2.图片地址数组  必填项
 * 3.配置信息      非必填
 * 4.轮播图创建完毕回调,回调中返回轮播对象数组,可用于后续逻辑处理  非必填
 */
swiper.init($(".swiper-main"), [
    "./img/1.jpg",
    "./img/2.jpg",
    "./img/3.jpg",
    "./img/4.jpg"
], {
    arrowtype: 'move', //可选,默认一直显示 - 'move' / 'none'(鼠标移上显示 / 不显示 )
    autoplay: true, //可选,默认true - true / false (开启轮播/关闭轮播)
    cantouch: true, //可选,默认true - true / false (开启拖拽切换/关闭拖切换)
    time: 3000 //可选,默认3000
}, function(list) {
    console.log("create success", list);
})

文件目录结构

  • css
    • ┝ index.css
  • img
    • ┝ a1.png
    • ┝ a2.png
    • ┝ a3.png
    • ┝ arrow-left.png
    • ┝ arrow-right.png
  • ┝ index.html
  • js
    • ┝ index.js
    • ┝ jquery.min.js
    • ┝ swiper.js

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

18247251005
2019年05月29日

嗯嗯

回复
蒲公英
2019年06月12日

这个挺好用的

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:4
所需牛币:10 开始下载

牛币获取:可通过签到、评论、充值、发布素材获得 » 牛币充值

会员账号
会员密码
安全验证