<!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. pxe无人值守安装多网卡注意事项

    pxe无人值守安装linux配置这里就不说了,直接看这篇博客http://www.cnblogs.com/mchina/p/centos-pxe-kickstart-auto-install-os.h ...

  2. spring+hibernate实体类注解详解(非原创) + cascade属性取值

    @Entity //继承策略.另一个类继承本类,那么本类里的属性应用到另一个类中 @Inheritance(strategy = InheritanceType.JOINED ) @Table(nam ...

  3. Word论文写作如何实现公式居中、编号右对齐

    第一步:插入表格 在公式所在行居中插入一行三列的表格,具体操作为: a.设置行居中,快捷键Ctrl+E: b.插入->表格->3×1的表格: 2 第二步:修改表格属性 新插入的表格三列等宽 ...

  4. 获取Linux进程运行在哪个CPU内核上面的方法

    首先,当某些时候,在一段程序或者借助第三方软件进行程序协助的时候,在性能的优化,以及程序bug的排除上面,可能会想知道该程序执行的进程被调度到了哪一个CPU内核进行工作,从而可以推断是否是受限于硬件还 ...

  5. windows下mongodb权限设置解决方法

    mongodb简介: MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoDB工作在收集和文件的概念. MongoDB默认设置为无权限访问限制,所以可以直 ...

  6. 深入理解Memcache原理 [转]

    1.为什么要使用memcache 由于网站的高并发读写需求,传统的关系型数据库开始出现瓶颈,例如: 1)对数据库的高并发读写: 关系型数据库本身就是个庞然大物,处理过程非常耗时(如解析SQL语句,事务 ...

  7. android6.0锁屏界面接收新通知处理流程

    灭屏状态下,接收新信息,屏幕会半亮显示通知流程: 1,应用构造notification后,传给NotificationManager,而后进入NotificationManagerService处理. ...

  8. css+js定位到屏幕中间

    ex:让一个div始终显示在屏幕中间 一. css:#idName{position: absolute;z-index: 999;width: ?px;margin-top: ?px;}//此处的初 ...

  9. React Native填坑之旅--Flow篇（番外）

    flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一.所以,算是RN填坑之旅系列的番外篇. Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以 ...

  10. BZOJ4170 极光（CDQ分治 或 树套树）

    传送门 BZOJ上的题目没有题面-- [样例输入] 3 5 2 4 3 Query 2 2 Modify 1 3 Query 2 2 Modify 1 2 Query 1 1 [样例输出] 2 3 3 ...