JQuery悬停控制图片轮播

jquery实现的鼠标悬停图片自动轮播效果，当把鼠标悬停到图片时，图像就会不断循环播放，速度非常快，效果非常逼真，就和在放武侠片一样，使用了jquery实现

jquery实现的鼠标悬停图片自动轮播效果，当把鼠标悬停到图片时，图像就会不断循环播放，速度非常快，效果非常逼真，就和在放武侠片一样，使用了jquery实现，下面小编给大家分析jq悬停控制图片轮播，请看小面的效果图。

在线预览             源码下载

具体实现的代码如下：

<!-- 轮播广告 --> <div> <ul> <li> <a title="" target="_blank" href="#"> <img alt="" src="https://www.jb51.net/images/alpha.png"> </a> </li> <li> <a title="" href="#"> <img alt="" src="https://www.jb51.net/images/alpha.png"> </a> </li> <li> <a title="" href="#"> <img alt="" src="https://www.jb51.net/images/alpha.png"> </a> </li> </ul> <ul> <li><a href="javascript:;">Previous</a></li> <li><a href="javascript:;">Next</a></li> </ul> <ol> <li><a>1</a></li> <li><a>2</a></li> <li><a>2</a></li> </ol> </div> <script src="https://www.jb51.net/js/jquery-1.10.2.min.js"></script> <script src="https://www.jb51.net/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>

css代码：

.flexslider { margin: 0px auto 20px; position: relative; width: 100%; height: 482px; overflow: hidden; zoom: 1; } .flexslider .slides li { width: 100%; height: 100%; } .flex-direction-nav a { width: 70px; height: 70px; line-height: 99em; overflow: hidden; margin: -35px 0 0; display: block; background: url(images/ad_ctr.png) no-repeat; position: absolute; top: 50%; z-index: 10; cursor: pointer; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all .3s ease; border-radius: 35px; } .flex-direction-nav .flex-next { background-position: 0 -70px; right: 0; } .flex-direction-nav .flex-prev { left: 0; } .flexslider:hover .flex-next { opacity: 0.8; filter: alpha(opacity=25); } .flexslider:hover .flex-prev { opacity: 0.8; filter: alpha(opacity=25); } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; filter: alpha(opacity=50); } .flex-control-nav { width: 100%; position: absolute; bottom: 10px; text-align: center; } .flex-control-nav li { margin: 0 2px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { background: url(images/dot.png) no-repeat 0 -16px; display: block; height: 16px; overflow: hidden; text-indent: -99em; width: 16px; cursor: pointer; } .flex-control-paging li a.flex-active, .flex-control-paging li.active a { background-position: 0 0; } .flexslider .slides a img { width: 100%; height: 482px; display: block; }

以上代码就是本文使用jq实现悬停控制图片轮播的内容，希望大家喜欢。

您可能感兴趣的文章: