素材牛VIP会员

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

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

 浏览:715次-  下载:6次-  评论:26次-  更新时间:2019-05-28
基于jQuey实现的图片轮播插件兼容IE11
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:基于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

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

18***05  
2019年05月29日

嗯嗯

回复
蒲***英  
2019年06月12日

这个挺好用的

回复
lg***35  
2019年06月21日

写的真不错!!!

回复
l8***88  
2019年06月22日

很漂亮,真不错s

回复
矿***水  
2019年06月25日

不错不错!!不错不错!!不错不错!!

回复
lb***bj  
2019年06月26日

写的真不错!!!

回复
零***落  
2019年06月28日

这个特效不错!!

回复
零***落  
2019年06月29日

特效不错啊!!

回复
lb***bj  
2019年07月02日

很漂亮,真不错s

回复
Ar***ff  
2019年07月05日

很不错。

回复
Ar***ff  
2019年07月08日

可以

回复
Wh***at  
2019年07月09日

看起来真的不错,学习一下

回复
零***落  
2019年07月10日

特效不错!!

回复
Wh***at  
2019年07月11日

真的不错

回复
零***落  
2019年07月11日

这个功能全面啊!!

回复
vi***ot  
2019年07月16日

特效不错!!

回复
ka***88  
2019年07月16日

写的真不错!!

回复
si***ne  
2019年07月19日

写的真好,厉害

回复
零***落  
2019年07月20日

写的真好,厉害

回复
零***落  
2019年07月21日

很漂亮,真不错啊!!!!

回复
零***落  
2019年07月23日

效果非常好的啊!!!!

回复
零***落  
2019年07月24日

效果非常好的啊~

回复
零***落  
2019年07月25日

效果非常好的啊!!

回复
lb***bj  
2019年07月25日

看起来真的不错,学习一下

回复
零***落  
2019年07月26日

效果非常好的啊不错!!

回复
勿***你  
2019年07月30日

写的真不错!

回复
古***场  
2019年08月01日

特效不错!!

回复
a5***09  
2019年08月30日

效果非常好,很不错的哈

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

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)