当前位置:Gxlcms > JavaScript > 基于jQuery实现响应式圆形图片轮播特效_jquery

基于jQuery实现响应式圆形图片轮播特效_jquery

时间:2021-07-01 10:21:17 帮助过:6人阅读

本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,mislider轮播图插件的特点有:

  • 使用简单
  • 在同一个屏幕中支持多个轮播图
  • 轮播图的内容可以是单张图片或复杂的HTML内容
  • 轻量级
  • 响应式设计
  • 非常容易定制
  • 丰富的回调函数
  • 跨浏览器,支持IE8+浏览器

引入核心文件
mislider插依赖于一些插件,在引入之前要先引入jQuery、html5shiv.js、mislider.min.js以及mislider.min.css,mislider-custom.css文件

构建html

  1. Pink Water Lillies
    Pink Water Lillies
  2. Pond with Lillies
    Pond with Lillies

注意:上面的class并不是必须的,如果不写这些class,插件会自动为相应的元素添加class。默认情况下,该轮播图插件使用的是有序列表的结构,如果你使用不同的元素结构,请确保要修改selectorSlider和selectorSlide选项。

写入JS初始化插件

注意:要确保.mis-stage jQuery选择器和HTML页面中的轮播图容器的class名称相同。
参数

以上就是为大家分享的超酷的jQuery响应式圆形图片轮播图插件miSlider,希望大家可以熟练使用miSlider插件在自己的作品中能灵活运用。

人气教程排行