你的位置:首页 > 软件开发 > Java > 基于jQuery可悬停控制图片轮播代码

基于jQuery可悬停控制图片轮播代码

发布时间:2015-08-05 10:00:04
基于jQuery可悬停控制图片轮播代码。这是一款可悬停切换全屏轮播jQuery幻灯片。效果图如下:在线预览 源码下载实现的代码:<!-- 轮播广告 --> <div id="banner_tabs" class=&qu ...

基于jQuery可悬停控制图片轮播代码

基于jQuery可悬停控制图片轮播代码。这是一款可悬停切换全屏轮播jQuery幻灯片。效果图如下:

基于jQuery可悬停控制图片轮播代码

在线预览    源码下载

实现的代码:

<!-- 轮播广告 -->  <div id="banner_tabs" class="flexslider">    <ul class="slides">      <li>        <a title="" target="_blank" href="#">          <img width="1920" height="482"  style="background: url(images/banner1.jpg) no-repeat center;" src='/images/loading.gif' data-original="images/alpha.png">        </a>      </li>      <li>        <a title="" href="#">          <img width="1920" height="482"  style="background: url(images/banner2.jpg) no-repeat center;" src='/images/loading.gif' data-original="images/alpha.png">        </a>      </li>      <li>        <a title="" href="#">          <img width="1920" height="482"  style="background: url(images/banner3.jpg) no-repeat center;" src='/images/loading.gif' data-original="images/alpha.png">        </a>      </li>    </ul>    <ul class="flex-direction-nav">      <li><a class="flex-prev" href="javascript:;">Previous</a></li>      <li><a class="flex-next" href="javascript:;">Next</a></li>    </ul>    <ol id="bannerCtrl" class="flex-control-nav flex-control-paging">      <li><a>1</a></li>      <li><a>2</a></li>      <li><a>2</a></li>    </ol>  </div>  <script src='/images/loading.gif' data-original="js/jquery-1.10.2.min.js"></script>  <script src='/images/loading.gif' data-original="js/slider.js"></script>  <script type="text/javascript">    $(function () {      var bannerSlider = new Slider($('#banner_tabs'), {        time: 5000,        delay: 400,        event: 'hover',        auto: true,        mode: 'fade',        controller: $('#bannerCtrl'),        activeControllerCls: 'active'      });      $('#banner_tabs .flex-prev').click(function () {        bannerSlider.prev()      });      $('#banner_tabs .flex-next').click(function () {        bannerSlider.next()      });    })  </script>

原标题:基于jQuery可悬停控制图片轮播代码

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录