基于jQuery可悬停控制图片轮播代码。这是一款可悬停切换全屏轮播jQuery幻灯片。效果图如下：
在线预览 源码下载
实现的代码：
<!--轮播广告--><divid="banner_tabs"class="flexslider"><ulclass="slides"><li><atitle=""target="_blank"href="#"><imgwidth="1920"height="482"alt=""style="background: url(images/banner1.jpg) no-repeat center;"src="images/alpha.png"></a></li><li><atitle=""href="#"><imgwidth="1920"height="482"alt=""style="background: url(images/banner2.jpg) no-repeat center;"src="images/alpha.png"></a></li><li><atitle=""href="#"><imgwidth="1920"height="482"alt=""style="background: url(images/banner3.jpg) no-repeat center;"src="images/alpha.png"></a></li></ul><ulclass="flex-direction-nav"><li><aclass="flex-PRev"href="javascript:;">Previous</a></li><li><aclass="flex-next"href="Javascript:;">Next</a></li></ul><olid="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><scriptsrc="js/jquery-1.10.2.min.js"></script><scriptsrc="js/slider.js"></script><scripttype="text/javascript">$(function() {varbannerSlider=newSlider($('#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;
}
via：http://www.w2bc.com/article/54959