<!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. Keepalived 配置实例

    Keepalived 是一款轻量级HA集群应用,它的设计初衷是为了做LVS集群的HA,即探测LVS健康情况,从而进行主备切换,不仅如此,还能够探测LVS代理的后端主机的健康状况,动态修改LVS转发规则 ...

  3. Windows XP发行12周年，我正步入中年，你已垂暮

    2001年10月25日,Windows XP正式全球上市!作为Windows 2000的升级版本,XP拥有大量新的功能:新的用户界面.防火墙整合等,这些都大大的增强了系统的易用性和安全性.而微软将于2 ...

  4. Ubuntu16.04下部署golang开发环境

    一.需要文件 golang http://www.golangtc.com/download liteide http://www.golangtc.com/download/liteide 二.安装 ...

  5. jquery基础事件

    一.常用的事件有:click.dblclick. mousedown.mouseup.mousemove.mouseover.mouseout.change.select.submit.keydown ...

  6. action func用法记记

    public partial class Form1 : Form { public Form1() { InitializeComponent(); } public delegate void s ...

  7. Stack Overflow is a question and answer site

    http://stackoverflow.com/ _ Stack Overflow is a question and answer site for professional and enthus ...

  8. LinkedHahsMap和HashMap的比较

    http://www.cnblogs.com/hubingxu/archive/2012/02/21/2361281.html#commentform 一般情况下,我们用的最多的是HashMap,在M ...

  9. JavaScript-BOM-history:保存当前窗口打开后成功访问过的url历史记录栈

    history:保存当前窗口打开后成功访问过的url历史记录栈history.go(n):前进n步前进一步:history.go(1);后退一步:history.go(-1);刷新:history.g ...

  10. 安卓稳定性压测工具_monkey环境搭建(简易)

    1.准备工具: sdk(64位操作系统):http://pan.baidu.com/s/1kV33pll sdk(32位操作系统):http://pan.baidu.com/s/1gfnww87 2. ...