dreamslider.js-炫酷九宮格組合動畫jQuery幻燈片插件

dreamslider.js是一款效果非常炫酷的九宮格組合動畫jQuery幻燈片插件。該幻燈片插件將所有縮略圖以網格形式排列，當用戶點擊某張縮略圖時，會以九宮格切片組合動畫的方式組合出高清大圖，效果非常的酷。該幻燈片的特點還有：</p> </span>

• 縮略圖帶有鼠標滑過效果： Zoom-in(默認),bounce,standout。
• 炫酷的九宮格組合動畫效果。
• 輕量級，容易集成。
• 不需要添加額外的縮略圖。

</ul>



查看演示 </a>      下載插件 </p> </span>

使用方法

使用dreamslider.js幻燈片插件需要在頁面中引入dreamSlider.css，jQuery和dreamslider.js文件。

<link rel="stylesheet" href="css/dreamslider.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/dreamslider.min.js"></script>

HTML結構

dreamslider.js幻燈片的基本HTML結構如下：

<div class="container">
    <div iclass="im_wrapper">
        <div ><img src="images/1.jpg" alt="" /></div>
        <div ><img src="images/2.jpg" alt="" /></div>
        <div ><img src="images/3.jpg" alt="" /></div>
        <div ><img src="images/4.jpg" alt="" /></div>
        <div ><img src="images/5.jpg" alt="" /></div>
        <div ><img src="images/6.jpg" alt="" /></div>
    </div>
</div>

初始化插件

在頁面DOM元素加載完畢之后，可以通過下面的方法來初始化該幻燈片插件。

<script type="text/javascript">
    $(function(){
        $('#container').dreamSlider({
            rowCount:6 //[limit 5 or 6] no of thumbs in a row
            //,easeEffect: 'bounce'
            //,easeEffect: 'standOut'
        });
    });
</script>

配置參數

• rowCount：頁面中每一行的縮略圖數量。
• easeEffect：鼠標滑過縮略圖的動畫效果：Zoom-in(默認),bounce,standout。

dreamSlider.js幻燈片插件的github地址為： https://github.com/dreamweiver/dreamSlider

來源：jQuery之家