slidesjs轮播插件使用方法
百里承业
<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="http://l3.51fanli.net/super/images/2016/08/57ba6e953d056.jpg">
<img src="http://l3.51fanli.net/super/images/2016/08/57ba6e953d056.jpg">
<img src="http://l3.51fanli.net/super/images/2016/08/57ba6e953d056.jpg">
<img src="http://l3.51fanli.net/super/images/2016/08/57ba6e953d056.jpg">
<img src="http://l3.51fanli.net/super/images/2016/08/57ba6e953d056.jpg">
</div>
</body>width (number) & height (number)—设置宽与高（必须）
$(function(){
$("#slides").slidesjs({
width: 700,
height: 393
});
});start (number)—设置加载后的第一张幻灯片
$(function(){
$("#slides").slidesjs({
start: 3
});
});navigation (object)—前后按钮设置。
$(function(){
$("#slides").slidesjs({
navigation: {
active: true,
// [boolean] Generates next and previous buttons。生成下一个和以前的按钮。
// You can set to false and use your own buttons.可以设置为false，并使用自己的按钮。
// User defined buttons must have the following:用户定义的按钮，必须具备以下条件：
// previous button: class="slidesjs-previous slidesjs-navigation"上一个按钮：class="slidesjs-previous slidesjs-navigation"
// next button: class="slidesjs-next slidesjs-navigation"下一个按钮：class="slidesjs-next slidesjs-navigation"
effect: "slide"
// [string] Can be either "slide" or "fade".可以是 "slide" 或者 "fade".
}
});
});pagination (object)—分页设置
$(function(){
$("#slides").slidesjs({
pagination: {
active: true,
// [boolean] Create pagination items.创建分页项
// You cannot use your own pagination. Sorry.不能使用自己的分页
effect: "slide"
// [string] Can be either "slide" or "fade".[string] 可以是 "slide" 或者 "fade".
}
});
});play (object)—播放和停止按钮设置。
$(function(){
$("#slides").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.生成的播放和停止按钮.
// You cannot use your own buttons. Sorry.不能使用自己的按键。
effect: "slide",
// [string] Can be either "slide" or "fade".可以是 "slide" 或者 "fade".
interval: 5000,
// [number] Time spent on each slide in milliseconds.每张幻灯片上花费的时间以毫秒为单位。
auto: false,
// [boolean] Start playing the slideshow on load.加载开始播放幻灯片
swap: true,
// [boolean] show/hide stop and play buttons显示/隐藏停止和播放按钮
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover鼠标经过暂停正在播放的幻灯片
restartDelay: 2500
// [number] restart delay on inactive slideshow重新启动延迟无效幻灯片。
}
});
});effect (object)—效果设置
$(function(){
$("#slides").slidesjs({
effect: {
slide: {
// Slide effect settings.滑动效果设置.
speed: 200
// [number] Speed in milliseconds of the slide animation.速度以毫秒为单位的幻灯片动画。
},
fade: {
speed: 300,
// [number] Speed in milliseconds of the fade animation.速度以毫秒为单位的幻灯片动画。
crossfade: true
// [boolean] Cross-fade the transition.交叉过度效果.
}
}
});
});callback (function)—回调函数的使用。
$(function(){
$("#slides").slidesjs({
callback: {
loaded: function(number) {
// Do something awesome!
// Passes start slide number第一次加载幻灯片时
},
start: function(number) {
// Do something awesome!
// Passes slide number at start of animation幻灯片开始切换时
},
complete: function(number) {
// Do something awesome!
// Passes slide number at end of animation幻灯片切换完成时
}
}
});
});分页位置调整
#slides {
display:none;
position:relative;
z-index:10;
}
.slidesjs-pagination {
position:absolute;
bottom:10px;
left:50%;
list-style: none;
z-index:20;
margin:0;
padding:0;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height:0;
padding-top: 13px;
background-image: url(../images/pagination.png);
background-position: 0 0;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
a:link,
a:visited {
color: #333
}
a:hover,
a:active {
color: #9e2020
}
类似资料：