jQuery悬停图片轮播效果，当鼠标悬停在图像，继续玩，很快的图像，效果非常逼真，放在武侠片，使用jQuery实现，我们分析JQ悬停控制的小图片轮播，请看图片效果方面。

在线预览源代码下载



具体实现代码如下：






















以前的
下一个


一
二
二





$（函数（）{（））
无功bannerslider =新的滑块（$（' # banner_tabs '），{
时间：5000，
延迟时间：400，
事件：'hover，
自动：真的，
模式：'fade，
Controller: $('#bannerCtrl'),
activecontrollercls：活动
}）；
$（# banner_tabs。Flex prev）。Click（function（）{）
BannerSlider.prev（）
}）；
$（# banner_tabs。Flex下）。Click（function（）{）
BannerSlider.next（）
}）；
}）




CSS代码：




{。FlexSlider
保证金：为0px auto 20px；
职位：相对；
宽度：100%；
身高：482px；
溢出：隐藏；
缩放：1；
}
flexslider.Slides Li {。
宽度：100%；
身高：100%；
}
Flex方向导航
宽度：70px；
身高：70px；
行高：99em；
溢出：隐藏；
保证金：- 35px 00；
显示块；
背景：URL（图像/ ad_ctr。PNG）不重复；
位置：绝对；
顶部：50%；
Z指数：10；
鼠标指针；
不透明性：0；
滤镜：alpha（不透明度= 0）；
WebKit的过渡：all.3s缓解；
边界半径：35px；
}
flex-direction-nav.flex-next {。
背景位置：0 70px；
权利：0；
}
flex-direction-nav.flex-prev {。
左：0；
}
FlexSlider：hover.flex-next {。
不透明性：0.8；
滤镜：alpha（不透明度= 25）；
}
FlexSlider：hover.flex-prev {。
不透明性：0.8；
滤镜：alpha（不透明度= 25）；
}
。FlexSlider：Flex下：徘徊徘徊，
。FlexSlider：Flex有悬停{徘徊。
不透明性：1；
滤镜：alpha（不透明度= 50）；
}
{ Flex控制导航
宽度：100%；
位置：绝对；
底部：10px；
文本对齐：中心；
}
flex控制权
保证金：0 2px；
显示：内联块；
缩放：1；
*显示：内联；
}
flex控制分页
背景：URL（图像/点。PNG）没有重复0 16px；
显示块；
身高：16px；
溢出：隐藏；
文本缩进：- 99em；
宽度：16px；
光标：指针；
}
李a.flex-active Flex控件的分页，
Flex控件的分页li.active {。
背景位置：00；
}
flexslider.slides一个img {。
宽度：100%；
身高：482px；
显示块；
}



上面的代码是JQ实现悬停图片轮播内容控件的使用，希望大家喜欢。