基于jQuery可悬停控制图片轮播代码。这是一款可悬停切换全屏轮播jQuery幻灯片。效果图如下:在线预览 源码下载实现的代码:<!-- 轮播广告 --> <div id="banner_tabs" class=&qu ...
基于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
(#换成@)。