如何简单实现图片轮播--―――-介绍一款插件slides

图片的轮播效果类似于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: 'images/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="images/new-ribbon.png" alt="" width="60" height="

60" vspace="10" id="ribbon">

<div id="slides">

<div class="slides_container">

<div>

<!--<!第一张图片-->

<a href="image1.jpg" title="" target="_blank" ><img src=

"image1.jpg" width="300" height="200" alt=" "></a>

<div class="caption" style="bottom:0">

<p>图片 1</p>

</div>

</div>

<div>

<!--<!第二张图片-->

<a href="image2.jpg" title="" target="_blank" ><img src=

"image2.jpg" width="300" height="200" alt="Slide 2"></a>

<div class="caption">

<p>图片 2</p>

</div>

</div>

<div>

<!--<!第三张图片-->

<a href="image3.jpg" title="" target="_blank" ><img src=

"image3.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>