要在網頁做圖片輪撥的效果可以使用 jQuery Cycle Plugin，官網在http://jquery.malsup.com/cycle/
在Visual Studio 2012 可以使用NuGet下載
按安裝之後，自動下載相關js檔案：
在網頁中，引用js檔案，並加入想要輪撥的圖片，利用javascript叫用cycle plugin就OK了
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.5.2.min.js"></script>
<script src="Scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="Images/oIMG_5060.jpg" />
<img src="Images/oIMG_5665.jpg" />
<img src="Images/oIMG_5783.jpg" />
<img src="Images/oIMG_5829.jpg" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.5.2.min.js"></script>
<script src="Scripts/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="Images/oIMG_5060.jpg" />
<img src="Images/oIMG_5665.jpg" />
<img src="Images/oIMG_5783.jpg" />
<img src="Images/oIMG_5829.jpg" />
</div>
</body>
</html>
網頁一執行，就會自動輪流撥放圖片，並有淡入淡出的換場效果
沒有留言:
張貼留言