基于jQuery可悬停控制图片轮播代码
2015-08-05 09:19
846 查看
基于jQuery可悬停控制图片轮播代码。这是一款可悬停切换全屏轮播jQuery幻灯片。效果图如下:
在线预览 源码下载
实现的代码:
css代码:
via:http://www.w2bc.com/article/54959
在线预览 源码下载
实现的代码:
<!-- 轮播广告 --> <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; }
via:http://www.w2bc.com/article/54959
相关文章推荐
- jQuery遍历Json数组
- jquery方法
- JQuery的Ajax跨域请求的解决方案
- 解决jQuery uploadify在非IE核心浏览器下无法上传
- 使用jQuery的9个误区
- jQuery 仿百度输入标签插件
- mark---[jQuery Fancybox插件使用参数详解]
- 解决jQuery uploadify在非IE核心浏览器下无法上传
- jquery实现实时改变网页字体大小、字体背景色和颜色的方法
- JQuery悬停控制图片轮播――代码简单
- jquery的几种ajax方式
- 分享一款超棒的jQuery旋钮插件 - jQuery knob
- jquery冒泡及阻止
- jQuery选择器
- jquery两种方式实现链接失效
- JQuery中$.ajax()方法参数详解
- 轻量级触摸响应式滑块插件JQuery lightSlider
- MyEclipse10中导入的jquery文件报错(出现红叉叉,提示语法错误)
- 利用jquery.ajax()实现跨域
- jquery实现99乘法表的动态显示