<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>jQuery可悬停控制图片轮播代码 - 站长素材</title>

 <style>

 .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;

 }

 </style>

 </head>

 <body>

 <br/><br/><br/>

 <!-- 轮播广告 -->

 <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="data: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="data: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="data: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>

 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

 <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

 <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>

 </div>

 </body>

 </html>

例子源码：

链接：http://pan.baidu.com/s/1jIPPTIm 密码：bxo6

基于jquery的图片轮播 （IE8以上）的更多相关文章

  1. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  2. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  3. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  4. jQuery补充，基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  5. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 基于面向对象的图片轮播（js原生代码）

    无论你想走多远,你都需要不断地走下去.前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标,也提现这你的代码能力,开发的水平.废话不多说,进入今天的主要分享————基于面向对象思想的图 ...

  8. jQuery实现图片轮播

    之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...

  9. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. (转)Jquery最实用的实例及源码（http://www.cnblogs.com/kingfly/archive/2012/12/05/2802539.html）

    1:窗口拖动 http://jqueryui.com/resizable/#max-min 2:导航条前后顺序拖动 http://jqueryui.com/sortable/ 3:类似百度首页板块顺序 ...

  2. asp.net应用程序生命周期和asp.net网页的生命周期

    一.asp.net应用程序生命周期 asp.net应用程序生命周期以浏览器向web服务器(比如IIS服务器)发送请求为起点,先后经历web服务器下的ISAPI(Internet Server Appl ...

  3. Android.mk 基本应用

    如果是在android源码里面编译我们自己的应用,就需要这个android.mk文件,这个文件就告诉android系统应用如何来编译这个应用以及这个应用它所依赖哪些文件等等信息.我对android.m ...

  4. Archlinux 上 Nginx + PHP + Mariadb + DiscuzX2.5 安装小记

    因为不好找下载集成服务器工具,而且他们自己又打包了一份 php 之类的程序,本身系统就已经有 php 还有数据库什么的了再搞一份受不了,最后选择了手动配置…… 这是一个在 Archlinux 上手动从 ...

  5. Linux命令小结：crontab/netstat/iostat/sar

    crontab cron可以设定在指定的时间运行任务. 1.查看定时任务 [root@client1 ~]# crontab -l -u root */1 * * * * date >> ...

  6. jetbrains产品激活方式(WebStorm，Pycharm有效)

    注册时,在打开的License Activation窗口中选择"activation code",在输入框输入下面的注册码 43B4A73YYJ-eyJsaWNlbnNlSWQiO ...

  7. My English Dictionary

    A axis 坐标轴 architecture 结构 B C consider 考虑 closure  闭包 clip  修剪 convert 改变 D default 默认的 valid 有效的 d ...

  8. interactivePopGestureRecognizer

    苹果一直都在人机交互中尽力做到极致,在iOS7中,新增加了一个小小的功能,也就是这个api:self.navigationController.interactivePopGestureRecogni ...

  9. cannot determine the location of the vs common tools folder

    问题:打开"VS2010开发人员命令提示后",上面提示"cannot determine the location of the vs common tools fold ...

  10. WinCE下读取注册表获得SD路径

    WinCE下读取注册表获得SD路径 [要点]WinCE注册表中[HKEY_LOCAL_MACHINE\System\StorageManager\Profiles\SDMemory\] 下键Folde ...