<!doctype html>
<head>
<script src="js/jquery-latest.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<style>
/* Prevents slides from flashing */防止闪烁
#slides {
display:none;
}
</style>
</head>
<body>
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 450,
navigation: { //显示上一张下一张
active: true
},
play: { //设置自动时的动画效果、自动播放、间隔、鼠标悬停、移出恢复时间
active: false,
// 生成下一张和上一张按钮。
// 可以设置false，使用自己写的按钮来替代系统的按钮。
// previous button: class="slidesjs-previous slidesjs-navigation" 自己写的按钮，上一张按钮的class=“”
// next button: class="slidesjs-next slidesjs-navigation" 下一张按钮的class=""
effect: "slide",
// [string] Can be either "slide" or "fade". 效果滑动，也可以设置成fade幻灯
interval: 2000,//动画间隔
auto:true,//默认不自动进行播放！十分重要，设置成true。
swap: false,//显示和隐藏按钮
pauseOnHover: true,// 鼠标移入，暂停动画
restartDelay: 2500,// 恢复动画间隔
},
effect: { //特别注意：动画效果要与上面play中的属性保持一致，否则点击切换图片后，无法恢复动画
slide:{
speed:2000, //动画切换速度
crossfade: true// 交叉幻灯效果
}}
});
});
</script>
</body>
时间： 2024-11-05 00:50:32