基于jQuery焦点图百叶窗效果切换

页面导航:首页 > 网络编程 > JavaScript > 基于jQuery焦点图百叶窗效果切换

基于jQuery焦点图百叶窗效果切换

来源:互联网 作者:脚本宝典 时间:2015-09-18 13:34 【

基于jQuery焦点图百叶窗效果切换。这是一款带各种百叶窗过渡效果的jQuery幻灯片插件。效果图如下: 实现的代码。 html代码: divclass=htmleaf-containerdivclass=sliderulclass=slider-mainliimgsrc=image

基于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>


Tags:

相关文章

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <