<!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. MAVEN解决Cannot change version of project facet Dynamic web module to 2.5

    我们用Eclipse创建Maven结构的web项目的时候选择了Artifact Id为maven-artchetype-webapp,由于这个catalog比较老,用的servlet还是2.3的,而一 ...

  2. en_windows_10_multiple_editions_version_1511_x64.iso

    好久没折腾电脑了,这几天在E盘装了个64位Windows 10 TH2 专业版,从MSDN官网下载的英文原版镜像,用kms10未能激活,一看日志文件,说我这是零售版,后面就关掉了什么监听端口,然后就完 ...

  3. SQL Server已提交读快照隔离级别的设置

    如果要把SQL Server数据库事务隔离级别设置为已提交读快照隔离 如果直接运行下面的语句: ALTER Database [mydbname] SET READ_COMMITTED_SNAPSHO ...

  4. django中使用Profile扩展User模块（基于django 1.10版本下）

    版本:Django 1.10.1(其他版本可能有不同的实现好解决办法) 参考官方文档:https://docs.djangoproject.com/en/1.10/topics/auth/custom ...

  5. PHP入门教程-开发环境搭建

    1.PHP简介: PHP是能让你生成动态网页的工具之一.PHP网页文件被当作一般HTML网页文件来处理并且在编辑时你可以用编辑HTML的常规方法编写PHP. 2.学习需要基础: a.HTML b.Ja ...

  6. I/O知识

    1.jdk1.4之前(jdk1.4开始提供了nio)的早起版本,java对I/O的支持并不完善,开发人员开发高性能I/O程序时,面临的问题主要有:     没有缓冲区,I/O性能存在问题     没有 ...

  7. 菜单的隐藏&显示

    //还是先上万一老师的原代码 //隐藏与显示菜单Self.Menu := nil; {隐藏菜单} Self.Menu := MainMenu1; {显示菜单} //初一看到代码,我有点抓不到感觉的意思 ...

  8. mysql解压缩安装（一）

    MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装在C:\P ...

  9. PHP 增删改查

    <h1>主页面family</h1> <table width="100%" border="1px" cellpadding=& ...

  10. nginx负载均衡最新

    配置conf文件 #user  nobody;worker_processes  1;#error_log  logs/error.log;#error_log  logs/error.log  no ...