JQuery悬停控制图片轮播――代码简单
2015-08-05 16:55
726 查看
jquery实现的鼠标悬停图片自动轮播效果,当把鼠标悬停到图片时,图像就会不断循环播放,速度非常快,效果非常逼真,就和在放武侠片一样,使用了jquery实现,下面小编给大家分析jq悬停控制图片轮播,请看小面的效果图。
具体实现的代码如下:
<!-- 轮播广告 --> <div id="banner_tabs" class="flexslider"> <ul class="slides"> <li> <a title="" target="_blank" href="#"> <img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png"> </a> </li> <li> <a title="" href="#"> <img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png"> </a> </li> <li> <a title="" href="#"> <img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="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="js/jquery-1.10.2.min.js"></script> <script src="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实现悬停控制图片轮播的内容,希望大家喜欢。
您可能感兴趣的文章:
- 基于JQuery的实现图片轮播效果(焦点图)
- 12款经典的白富美型―jquery图片轮播插件―前端开发必备
- jQuery图片轮播的具体实现
- jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
- jQuery制作简洁的图片轮播效果
- jQuery插件slicebox实现3D动画图片轮播切换特效
- 原生js和jquery实现图片轮播淡入淡出效果
- JavaScript实现带标题的图片轮播特效
- jQuery插件boxScroll实现图片轮播特效
- Jquery代码实现图片轮播效果(一)
- js淡入淡出的图片轮播效果代码分享
- jQuery左右滚动支持图片放大缩略图图片轮播代码分享
- jQuery右侧选项卡焦点图片轮播特效代码分享
- js图片轮播特效代码分享
- jQuery超精致图片轮播幻灯片特效代码分享
- js带缩略图的图片轮播效果代码分享
- jquery图片轮播特效代码分享
- JQuery实现图片轮播效果
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- jQuery Ajax 跨域调用
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结
- 23个超流行的jQuery相册插件整理分享
- 影响jQuery使用的14个方面
- jQuery 仿百度输入标签插件附效果图