html5jqueryl轮播图,小巧的jquery轮播图插件xSlider

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

使用方法

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

HTML结构

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

• 
• 
• 
• 
• 
• 
• 

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

自动切换时长