JQuery悬停控制图片轮播——代码简单
2019/6/29 22:25:36
本文主要是介绍JQuery悬停控制图片轮播——代码简单,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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悬停控制图片轮播——代码简单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习