基于JSON数据简单jQuery幻灯片插件

PetitQ 幻灯片/轮播 2018-11-07 1.52K 0 0

jquery-slider 是一款基于 JSON 格式数据的 jQuery 幻灯片插件。该幻灯片通过 JSON 数据来提供图片地址和描述信息等，你可以通过更换 JSON 数据来动态切换不同的图片。

使用方法:

在页面中引入 jquery 和 slider.js 文件和 font-awesome 字体图标文件。

也想出现在这里？联系我们吧

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/slider.js"></script>

HTML 结构:

使用一个<div>作为幻灯片的容器，里面放置作为前后导航按钮的<button>元素。

```
<div class="slider" id="slider">
```

  <button type="button" class="button button-prev">

    <i class="fa fa-chevron-left" aria-hidden="true"></i>

```
  </button>
```

  <button type="button" class="button button-next">

    <i class="fa fa-chevron-right" aria-hidden="true"></i>

```
  </button>
```
```
</div>
```

CSS 样式:

为幻灯片设置下面的 CSS 样式。

```
.slider {
```
```
  width: 100%;
```
```
  overflow: hidden;
```
```
  height: 500px;
```
```
  position: relative;
```
```
}
```
```
.sliderList {
```
```
  position: absolute;
```
```
  top: 0;
```
```
  width: 300%;
```
```
  height: 100%;
```
```
  list-style: none;
```
```
}
```
```
.sliderList li {
```
```
  position: absolute;
```
```
  top: 0;
```
```
  bottom: 0;
```
```
  overflow: hidden;
```
```
  width: 33.333333%;
```
```
  height: 100%;
```
```
  padding: 0;
```
```
  margin: 0;
```
```
}
```
```
.sliderList li img {
```
```
  width: 100%;
```
```
  min-height: 100%;
```
```
  border: none;
```
```
}
```
```
.bulletList {
```
```
  position: absolute;
```
```
  bottom: 15px;
```
```
  width: 100%;
```
```
  margin: 0 auto;
```
```
  list-style: none;
```
```
}
```
```
.bulletList li {
```
```
  display: inline-block;
```
```
  width: 12px;
```
```
  height: 12px;
```
```
  margin: 0 5px;
```
```
  -webkit-border-radius: 50%;
```
```
  -moz-border-radius: 50%;
```
```
  -ms-border-radius: 50%;
```
```
  border-radius: 50%;
```
```
  background-color: #fff;
```
```
  cursor: pointer;
```
```
}
```

.bulletList .bulletActive { background-color: #0b0d18; }

```
.content {
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  right: 0;
```
```
  background-color: rgba(0, 0, 0, 0.3);
```
```
  font-size: 48px;
```
```
  color: #fff;
```
```
}
```
```
.button {
```
```
  position: absolute;
```
```
  bottom: 15px;
```
```
  z-index: 2;
```
```
  display: block;
```
```
  width: 40px;
```
```
  height: 40px;
```
```
  box-sizing: border-box;
```
```
  margin: 0;
```
```
  padding: 0;
```
```
  border: none;
```
```
  -webkit-border-radius: 5px;
```
```
  -moz-border-radius: 5px;
```
```
  -ms-border-radius: 5px;
```
```
  border-radius: 5px;
```

  background-color: rgba(5, 0, 36, 0.6);

```
  color: #fff;
```
```
}
```
```
.button-prev { left: 15px; }
```
```
 
```
```
.button-next { right: 15px; }
```

JSON 数据:

该幻灯片的图片和图片描述信息有 JSON 数据来提供，格式如下：

```
sliderJSON = [
```
```
  {
```
```
    "imagePath": "1.jpg",
```
```
    "order": "2",
```
```
    "url": "#",
```
```
    "slideText": "图片描述"
```
```
  },
```
```
  {
```
```
    "imagePath": "2.jpg",
```
```
    "order": "3",
```
```
    "url": "#",
```
```
    "slideText": "图片描述"
```
```
  }, 
```
```
  {
```
```
    "imagePath": "3.jpg",
```
```
    "order": "1",
```
```
    "url": "#",
```
```
    "slideText": "图片描述"
```
```
  },
```
```
  {
```
```
    "imagePath": "4.jpg",
```
```
    "order": "4",
```
```
    "url": "#",
```
```
    "slideText": "图片描述"
```
```
  }
```

Github 地址：https://github.com/eryasov/jquery-slider

基于 JSON 数据简单 jQuery 幻灯片插件

已有 380 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

基于JSON数据简单jQuery幻灯片插件

使用方法:

HTML 结构:

CSS 样式:

JSON 数据:

基于 JSON 数据简单 jQuery 幻灯片插件

相关文章

jQuery支持触摸屏设备幻灯片插件

jQuery+CSS3超酷全屏视觉差幻灯片特效

js和CSS3超炫酷轮播图过渡动画特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法:

HTML 结构:

CSS 样式:

JSON 数据:

基于 JSON 数据简单 jQuery 幻灯片插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复