2013年5月29日 星期三

jQuery Cycle plugin

要在網頁做圖片輪撥的效果可以使用 jQuery Cycle Plugin,官網在http://jquery.malsup.com/cycle/

在Visual Studio 2012 可以使用NuGet下載

image

按安裝之後,自動下載相關js檔案:

image

在網頁中,引用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>

網頁一執行,就會自動輪流撥放圖片,並有淡入淡出的換場效果

image

image

image

沒有留言:

總瀏覽量