xSlider - 图片轮播幻灯片jQuery插件

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

xSlider.js 是一款小巧的 jquery 轮播图插件。该 jquery 轮播图使用简单，代码简洁，运行速度快，兼容 ie8 浏览器。

使用方法：

在页面中引入 jquery 和 xSlider.js 文件。

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

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

<script type="text/javascript" src="path/to/js/xSlider.js"></script>

HTML 结构：

xSlider 轮播图的基本 HTML 结构如下：

```
<div class="slider">
```
```
  <div class="slider-img">
```
```
    <ul class="slider-img-ul">
```

      <li><img src="images/slider-5.jpg"></li>

      <li><img src="images/slider-1.jpg"></li>

      <li><img src="images/slider-2.jpg"></li>

      <li><img src="images/slider-3.jpg"></li>

      <li><img src="images/slider-4.jpg"></li>

      <li><img src="images/slider-5.jpg"></li>

      <li><img src="images/slider-1.jpg"></li>

```
    </ul>
```
```
  </div>
```
```
</div>
```

CSS 样式：

为轮播图添加下面的必要的 CSS 样式：

```
.slider {
```
```
    width: 1200px;
```
```
    margin: 50px auto;
```
```
    position: relative;
```
```
}
```
```
.slider:hover .slider-btn {
```
```
    color: #fff;
```
```
    text-shadow: 0 0 5px #666;
```
```
}
```
```
.slider .slider-img {
```
```
    width: 12000px;
```
```
    position: relative;
```
```
}
```
```
.slider .slider-img .slider-img-ul {
```
```
    position: absolute;
```
```
    left: 0;
```
```
    top: 0;
```
```
    overflow: hidden;
```
```
}
```
```
.slider .slider-img .slider-img-ul li {
```
```
    float: left;
```
```
}
```

.slider .slider-img .slider-img-ul li img {

```
    width: 1200px;
```
```
    height: 460px;
```
```
}
```
```
.slider .slider-dot ul {
```
```
    position: absolute;
```
```
    right: 50px;
```
```
    bottom: 30px;
```
```
}
```
```
.slider .slider-dot ul li {
```
```
    cursor: pointer;
```
```
    width: 10px;
```
```
    height: 10px;
```
```
    border-radius: 50%;
```
```
    background: #ccc;
```
```
    border: 2px solid #fff;
```
```
    float: left;
```
```
    margin-left: 10px;
```
```
}
```

.slider .slider-dot ul li.active, .slider .slider-dot ul li:hover {

```
    background: #fff;
```
```
}
```
```
.slider .slider-btn {
```
```
    position: absolute;
```
```
    width: 50px;
```
```
    height: 100px;
```
```
    top: 50%;
```
```
    line-height: 100px;
```
```
    text-align: center;
```
```
    color: #fff;
```
```
    font-size: 28px;
```
```
    text-decoration: none;
```
```
    font-family: '黑体';
```
```
    color: rgba(255, 255, 255, 0);
```
```
}
```
```
.slider .slider-btn:hover {
```

    background: rgba(125, 125, 125, .3);

```
}
```
```
.slider .slider-btn.slider-btn-left {
```
```
    left: 0;
```
```
    margin-top: -50px;
```
```
}
```
```
.slider .slider-btn.slider-btn-right {
```
```
    right: 0;
```
```
    margin-top: -50px;
```
```
}
```

初始化插件：

在页面 DOM 元素加载完毕之后，可以通过 xSlider()方法来初始化该轮播图插件。

```
$('.slider').xSlider()
```

配置参数：

xSlider 轮播图插件的可用配置参数如下：

```
$('.slider').xSlider({
```
```
 
```
```
  // slider width
```
```
  w: 1200,
```
```
 
```
```
  // current slide
```
```
  current: 0,
```
```
 
```
```
  // animation speed
```
```
  speed: 500,
```
```
 
```
```
  // autoplay interval
```
```
  intervalTime: 5000
```
```
 
```
```
})
```

详细参数：

参数	默认值	描述
w	.slider 的宽度	轮播图宽度
current	0	默认显示第 n 张图（从 0 开始）
speed	500	图片切换速度
intervalTime	5000	自动切换时长

Github 地址：https://github.com/codexu/xSlider

xSlider - 图片轮播幻灯片 jQuery 插件

已有 478 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

幻灯片/轮播

xSlider - 图片轮播幻灯片jQuery插件

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

配置参数：

详细参数：

xSlider - 图片轮播幻灯片 jQuery 插件

相关文章

CoverFlow - 3D音乐专辑封面jQuery特效

超酷对角线图片轮播图特效

多种特效网格缩略图JS幻灯片

发表回复取消回复

热销模板

幻灯片/轮播

使用方法：

HTML 结构：

CSS 样式：

初始化插件：

配置参数：

详细参数：

xSlider - 图片轮播幻灯片 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复