图片的轮播效果类似于PPT中的幻灯片切换效果，可以使多幅图片以一种动态的方式自动切换，也可以通过鼠标点击控制要显示的图片。这种动画效果我们经常在网上看到，那么又怎么用slides插件简单实现呢？
代码如下：
<script src="jQuery/jquery-1.9.1.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'p_w_picpaths/loading.gif', //等待图标
play:6000, //图片切换延迟
pause: 6000, //图片暂停时间
hoverPause: true,
animationStart: function(){
$('.caption').animate({
bottom:-35
},100);
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},100);
if (window.console && console.log) {
console.log(current);
};
}
});
});
</script>
<div class="scrolpict" id="container">
<div id="example">
<img src="p_w_picpaths/new-ribbon.png" alt="" width="60" height="
60" vspace="10" id="ribbon">
<div id="slides">
<div class="slides_container">
<div>
<!--<!第一张图片-->
<a href="p_w_picpath2.jpg" title="" target="_blank" ><img src=
"p_w_picpath2.jpg" width="300" height="200" alt=" "></a>
<div class="caption" >
<p>图片 1</p>
</div>
</div>
<div>
<!--<!第二张图片-->
<a href="p_w_picpath3.jpg" title="" target="_blank" ><img src=
"p_w_picpath3.jpg" width="300" height="200" alt="Slide 2"></a>
<div class="caption">
<p>图片 2</p>
</div>
</div>
<div>
<!--<!第三张图片-->
<a href="p_w_picpath4.jpg" title="" target="_blank" ><img src=
"p_w_picpath4.jpg" width="300" height="200" alt="Slide 3"></a>
<div class="caption">
<p>图片 3</p>
</div>
</div>
</div>
</div>
<img src="frame.png" width="300" height="200" alt=" " id=
"frame">
</div>
</div>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
