您好,登錄后才能下訂單哦!
圖片的輪播效果類(lèi)似于PPT中的幻燈片切換效果,可以使多幅圖片以一種動(dòng)態(tài)的方式自動(dòng)切換,也可以通過(guò)鼠標(biāo)點(diǎn)擊控制要顯示的圖片。這種動(dòng)畫(huà)效果我們經(jīng)常在網(wǎng)上看到,那么又怎么用slides插件簡(jiǎn)單實(shí)現(xiàn)呢?
代碼如下:
<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', //等待圖標(biāo)
play:6000, //圖片切換延遲
pause: 6000, //圖片暫停時(shí)間
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>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。