你的位置:首页 > Java教程

[Java教程]基于jQuery焦点图百叶窗效果切换


基于jQuery焦点图百叶窗效果切换。这是一款带各种百叶窗过渡效果的jQuery幻灯片插件。效果图如下:

在线预览    源码下载

实现的代码。

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({ //开始创建效果      pNode: '.slider', //容器的选择器 必填      cNode: '.slider-main li', //轮播体的选择器 必填      speed: 3000, //速度 默认3000 可不填写      autoPlay: true //是否自动播放 默认true 可不填写    });  </script>

via:http://www.w2bc.com/article/jquery-blind-focus