基于jQuery焦點(diǎn)圖百葉窗效果切換

2024-04-27 15:01:28

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

基于jQuery焦點(diǎn)圖百葉窗效果切換。這是一款帶各種百葉窗過渡效果的jQuery幻燈片插件。效果圖如下：

在線預(yù)覽源碼下載

實(shí)現(xiàn)的代碼。

html代碼：

<div class="htmleaf-container">       <div class="slider">           <ul class="slider-main">               <li>                   <img src="images/1.jpg" alt="">               </li>               <li>                   <img src="images/2.jpg" alt="">               </li>               <li>                   <img src="images/3.jpg" alt="">               </li>               <li>                   <img src="images/4.jpg" alt="">               </li>           </ul>       </div>   </div>    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>   <script src="js/osSlider.js"></script>   <script type="text/Javascript">       var slider = new osSlider({ //開始創(chuàng)建效果           pNode: '.slider', //容器的選擇器 必填           cNode: '.slider-main li', //輪播體的選擇器 必填           speed: 3000, //速度 默認(rèn)3000 可不填寫           autoPlay: true //是否自動(dòng)播放 默認(rèn)true 可不填寫       });   </script>