<!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. C++中虚继承派生类构造函数的正确写法

    最近工作中某个软件功能出现了退化,追查下来发现是一个类的成员变量没有被正确的初始化.这个问题与C++存在虚继承的情况下派生类构造函数的写法有关.在此说明一下错误发生的原因,希望对更多的人有帮助. 我们 ...

  2. jvm、jre、jdk

    JVM和JRE浅谈 Java运行时环境JRE包含:Java虚拟机.库函数.运行Java应用程序和Applet所必须的文件,JDK(又称SDK)包含:JRE的超集.编译器.调试器等开发工具. java平 ...

  3. GPU高性能计算-CUDA

    前段时间有个同学的毕设是搞并行计算的,他基本不懂编程把我拉过去帮忙,我之前也没弄过,帮着搞了2天.先把代码贴上去,等有时间在把详细补充一些内容. CUDA编程主要是利用了显卡优越的并行计算能力,把一个 ...

  4. iOS TableView如何刷新指定的cell或section

    指定的section单独刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:indexPath.row]; [tableview relo ...

  5. jquery easyui tree dialog

    <script type="text/javascript" src="<%=request.getContextPath()%>/include/ja ...

  6. ms sql server 在cmd中执行sqlcmd的时候报错

    cmd下直接输入sqlcmd会提示 错误: HResult 0x2,级别 16,状态 1命名管道提供程序: 无法打开与 SQL Server 的连接 [2].Sqlcmd: 错误: Microsoft ...

  7. The import java.io cannot be resolved

    在导入一个新项目后出现 The import java.io cannot be resolved.String cannot be resolved to a type 解决: 将JRE Syste ...

  8. iOS开发中的各种错误

    提交iTunesconnect遇到的问题: 1. error itms-90179 Invalid Code Signing. 解决:发现是发布正式被撤销了,重新生成发布Certificates,重新 ...

  9. 用C语言关于学生管理系统的几种实现方法（一位数组，二维数组，指针，结构体）

    一位数组: #include <stdio.h> #include<string.h> #define N 5 void luru(float s[],int n); void ...

  10. 用eclipse搭建SSH（struts+spring+hibernate）框架

    声明: 本文是个人对ssh框架的学习.理解而编辑出来的,可能有不足之处,请大家谅解,但希望能帮助到大家,一起探讨,一起学习! Struts + Spring + Hibernate三者各自的特点都是什 ...