如何簡單實現圖片輪播--———-介紹一款插件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: '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>