jquery.cycle.js是一個非常實用的jQuery插件，可以幫助我們實現圖片輪播、淡入淡出等效果。下面我們看一個demo。

//HTML代碼
<div class="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
//CSS代碼
.slideshow{
position: relative;
margin: auto;
width: 500px;
height: 300px;
overflow: hidden;
}
.slideshow img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
//JS代碼
$('.slideshow').cycle({
fx: 'fade',
speed: 1000,
timeout: 3000,
pager: '#pager',
pagerEvent: 'mouseover'
});

我們首先定義了一個包含三張圖片的div容器，以及對應的CSS樣式。其中，容器設置了固定寬高和overflow:hidden，用來隱藏超出容器范圍的圖片；每張圖片設置了position:absolute，用來覆蓋顯示在容器上，并將display設置為none以隱藏初始狀態下的圖片。

接下來，我們引入了jquery.cycle.js插件，并利用jQuery選擇器選中了我們的容器，并在其中調用了.cycle()方法。在.cycle()方法中，我們可以設置很多參數，例如輪播效果的種類（fx）、圖片切換速度（speed）、自動輪播間隔時間（timeout）等等。在這里，我們設置了fade漸隱漸顯效果、速度為1秒、間隔時間為3秒，并且啟用了分頁器，并將分頁器事件設為鼠標移入時切換。

至此，我們就實現了一個簡單的jQuery圖片輪播效果demo。通過以上示例代碼，我們可以快速上手jquery.cycle.js插件，并且根據自己的需要對其進行定制化設置。