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 | 自动切换时长 |
xSlider.js轮播图插件的github地址为:https://github.com/codexu/xSlider