最近在做项目的时候，发现了这款插件slides.jquery.js，操作起来非常简单，不用自己去敲js代码，只需要简单配置几个属性就可以实现幻灯片轮播了。
使用例子：
tips:这个例子不做过多样式的修饰，只为了让你们可以快速了解它的使用方法，例子下面我会再写一个好看的轮播图实例哒！
<head>
<!--下载jq和slides.jquery.js并引入-->
<script src="jquery-1.2.6.min.js"></script>
<script src="slides.jquery.js"></script>
</head>
<div id="slides">
<div class="slides_container">
<div style="background-color: red"></div>
<div style="background-color: yellow"></div>
<div style="background-color: green"></div>
<div style="background-color: blue"></div>
</div>
</div>
.slides_container {
width: 670px;
height: 370px;
}
.slides_container div {
width: 670px;
height: 370px;
display: block;
}
.prev{
margin-right: 10px;
}
$(function () {
$("#slides").slides({
container: 'slides_container', /*设置放置图片层的顶级div 样式名称*/
generateNextPrev: true, /*是否自动生成 上一个 下一个 按钮*/
generatePagination: true, /*是否自动生成分页导航层*/
next: 'next', /*自动生成的下一个按钮 样式名称*/
prev:'prev', /*自动生成的上一个按钮 样式名称*/
play: 2000,
pause: 2000,
effect: "fade",
currentClass: 'current', /*设置分页导航层中 当前分页项目的样式名称*/
paginationClass:'page', /*设置分页导航层的 样式名称*/
});
});
效果图如下：
实例
经测试，可正确显示，图片和一些图标你们可以替换成自己的哈。ps:我分页的图标是设计在一张图片上，然后进行定位显示我想要的那一部分的，你们那里可以按照自己习惯来，如果用多张的就修改一下样式就行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="jquery-1.2.6.min.js"></script>
<script src="slides.jquery.js"></script>
</head>
<body>
<div id="banner-box">
<div class="banner-nav banner-nav-abs">
<div class="banner-inner png">
<ul>
<li>
<div></div>
<a href="javascript:;" class="bg1"><span class="png"></span>文字文字文字</a>
</li>
<li>
<div></div>
<a href="javascript:;" class="bg2"><span class="png"></span>文字文字文字</a>
</li>
<li>
<div></div>
<a href="javascript:;" class="bg
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
