之前写了一个焦点图左右轮播的，感觉淡出淡入用得也比较多，就干脆一起放上来啦。这个容器用了百分比宽度，图片始终保持居中处理，定宽或者自适应宽度都是可以的。

兼容到IE6+以上浏览器，有淡出淡入速度和切换间隔两个参数可以改。效果图如下：

Html代码如下：

<!doctype html>

<html lang="zh-CN">

<head>

  <meta charset="utf-8">

  <title>淡出淡入焦点图</title>

  <link href="css/style.css" rel="stylesheet"/>

  <script src="js/jquery-1.9.1.min.js"></script>

  <script src="js/common.js"></script>

</head>

<body>

  <div class="wrap">

    <div class="banner">

      <div class="bannerCon">

        <!-- 容器有做自适应宽度处理，下面的图片会保持居中显示，建议使用最大尺寸的图片填充 -->

        <ul class="imgList">

          <li><a href="#"><img src="data:images/banner01.jpg" alt=""/></a></li>

          <li><a href="#"><img src="data:images/banner02.jpg" alt=""/></a></li>

          <li><a href="#"><img src="data:images/banner03.jpg" alt=""/></a></li>

        </ul>

        <ul class="btnList">

          <li class="cur"><span></span></li>

          <li><span></span></li>

          <li><span></span></li>

        </ul>

        <span class="pre-nex prev">&lt;</span>

        <span class="pre-nex next">&gt;</span>

      </div>

    </div>

  </div>

</body>

</html>

Css样式如下：

@charset "utf-8";

/* 简单reset */

body,  p,  ul, ol, li {

    margin:;

    padding:;

}

ul, ol {

    list-style: none;

}

img { border:none; }

a,button{ outline: none; }

.clearfix:after {

    visibility: hidden;

    display: block;

    font-size:;

    content: " ";

    clear: both;

    height:;

}

/* 具体样式 */

.banner { height: 400px; }

.banner .bannerCon {

    position: relative;

    width: 60%;

    height: 100%;

    margin: 0 auto;

    overflow: hidden;

}

.bannerCon .imgList {

    width: 100%;

    height: 100%;

}

.bannerCon .imgList li {

    display: none;

    position: absolute;

    top:;

    left:;

    width: 100%;

    height: 100%;

    background-color: #e2f6fd; /* 这个背景是为了展示宽度大于图片宽度时的区域，可以删除 */

    z-index:;

}

.bannerCon .imgList li a {

    display: block;

    height: 100%;

    text-align: center;

}

.imgList li a img {

    position: absolute;

    top:;

    left: 50%;

    margin-left: -400px; /* 这个数值填图片的实际宽度的一半 */

}

.bannerCon .pre-nex {

    display: none;

    position: absolute;

    top: 50%;

    width: 40px;

    height: 60px;

    margin-top: -40px;

    font: bold 40px/60px Simsun;

    color: #ccc;

    text-align: center;

    border:none;

    background: rgba(0,0,0,.30);

    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);

    cursor: pointer;

    z-index:;

}

.bannerCon .pre-nex.show { display: inline-block; }

.bannerCon .prev { left: 13%; }

.bannerCon .next { right: 13%; }

.bannerCon .btnList {

    position: absolute;

    left:;

    bottom: 20px;

    width: 100%;

    height: 12px;

    text-align:center;

    z-index:;

    _overflow: hidden;

}

.bannerCon .btnList li { display: inline; }

.bannerCon .btnList li span {

    display: inline-block;

    width: 12px;

    height: 12px;

    margin: 0 5px;

    border-radius: 6px;

    background-color:#14829e;

    cursor: pointer;

}

.bannerCon .btnList li.cur span { background-color: #f30; }

Js代码如下：

//加载在文本读取之后的js语句 开始 =============================================================

    function fadeImg(obj,speed,interval){    //父级容器，淡出淡入速度，切换间隔

        $("."+obj).each(function(){

            var $box = $(this),

                $imgUl = $box.children(".imgList"),

                $imgLi = $imgUl.children("li"),

                $btnUl = $box.children(".btnList"),

                $btnLi = $btnUl.children("li"),

                $btnPreNex = $box.children(".pre-nex"),

                n = $imgLi.length,

                k = 0,

                Player = setInterval(function(){fade()},interval);

            $imgLi.eq(0).fadeIn(speed);                         //第一张先淡入

            function fade(){                                    //淡出淡入事件

                k += 1;

                if(k >= n){

                    k = 0;

                }

                $btnLi.removeClass('cur').eq(k).addClass('cur');

                $imgLi.fadeOut(speed).eq(k).fadeIn(speed);

            };

            $btnLi.click(function(){                            //小圆点点击事件

                var index = $btnLi.index(this);

                $(this).addClass('cur').siblings('li').removeClass('cur');

                $imgLi.fadeOut(speed).eq(index).fadeIn(speed);

                k = index;

            });

            $btnPreNex.click(function(){                        //左右按钮点击事件

                if(!$imgLi.is(":animated")){

                    if($(this).hasClass('next')){

                        k += 1;

                        if(k >= n){

                            k = 0;

                        }

                    }

                    else{

                        k += -1;

                        if(k < 0){

                            k = n-1;

                        }

                    }

                    $btnLi.removeClass('cur').eq(k).addClass('cur');

                    $imgLi.fadeOut(speed).eq(k).fadeIn(speed);

                }

            });

            $box.hover(                                            //鼠标移入事件（不用toggle是为了兼容1.9+的JQ库）

                function(){

                    clearInterval(Player);

                    $btnPreNex.addClass('show');

                },

                function(){

                    Player = setInterval(function(){fade()},interval);

                    $btnPreNex.removeClass('show');

                }

            );

        });

    }

    $(function () {                           //读取轮播事件

        fadeImg("bannerCon",1000,3000);

    });

jq库用1.7+的都没问题的啦^_^ 。如果觉得对你们有帮助，就给个赞哈~~~

Jquery制作--焦点图淡出淡入的更多相关文章

  1. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  2. Jquery制作--焦点图左右轮播

    公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js ...

  3. 8款耀眼的jQuery/HTML5焦点图滑块插件

    1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小 ...

  4. jQuery cxSlide 焦点图轮换

    cxSlide 是一个简单易用的焦点图展示插件,支持水平.纵向切换,透明过渡切换. 已支持 CSS 动画过渡切换.通过 CSS 动画切换,可以展示更多效果. 版本: jQuery v1.7+ jQue ...

  5. Jquery幻灯片焦点图插件

    兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果. 下载

  6. jQuery.KinSlideshow焦点图轮换

    兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果. 演示网 ...

  7. 8种效果实例-jQuery anoSlide 焦点图轮播

    anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件. 在线实例 单个 多个 动画延迟 自动播放 显示分页 显示标题 延迟加载 自适应高度 使用方法 <div cl ...

  8. jQuery实现焦点图[兼容ie7+]

    HTML: <div class="freehand" id="freehand"> <h1>宠物手绘</h1> <d ...

  9. jQuery悬浮焦点图宽屏

    在线演示 本地下载

随机推荐

  1. 利用Oracle创建数据库

    本文仅用于学习交流,商业用途请支持正版!转载请注明:http://www.cnblogs.com/mxbs/p/6217151.html 数据库的创建 打开"所有程序"-" ...

  2. JAVA设计模式之1-单例模式

    设计模式是什么? 设计模式是一种思路,是在前辈们的软件工程中总结出来的套路,并且这些套路已经经过很多项目的测试,是比较成熟的思路,所以现在来总结一下常见的设计模式. 最简单最常用的就是单例模式: 一般 ...

  3. Hibernate 中出现表名(XXX) is not mapped 问题

    今天晚上自己试着用Hibernate去搭建一个Web工程,然后去实现一个简单的登录.通过Hibernate?做查询操作的时候总是报出这样的错:users is?not?mapped. 于是乎去检查了下 ...

  4. Nuget 命令 NuGet 管理项目库

    因为可视化库程序包管理器的局限性,有很多需要的功能在界面中无法完成. 以下技巧均需要在"程序包管理器控制台"中使用命令来完成. 一.改变项目目标框架后,更新程序包 当改变项目的目标 ...

  5. 解决ASP.NET上传文件大小限制

    第一种方法,主要适用于IIS6.0版本 一.修改配置Web.Config文件中的httpRuntime节点对于asp.net,默认只允许上传4M文件,增加如下配置,一般可以自定义最大文件大小.一.修改 ...

  6. 记录rewrite url我之前不知道的地方

    大部分url重写的需求是伪静态,当然有很多第三方开源组件,但是这种需求的核心方法其实就是context.rewritePath() 要是系统像ARR那样,用重写做代理和反向代理,一般的重写就不行了,c ...

  7. C#中的WebBrowser控件的使用

    0.常用方法   Navigate(string urlString):浏览urlString表示的网址 Navigate(System.Uri url):浏览url表示的网址 Navigate(st ...

  8. git初级--配置

    source: http://www.cnblogs.com/sakurayeah/p/5800424.html 一.注册github账号 github网址https://github.com/ 下一 ...

  9. C/C++的基本数据类型

    数据类型决定数据的空间分配, 及能对其做什么操作. C语言中的四种基本数据类型: char,int,float,double. C与C++定义这些类型时都只是限定它们的最大最小值, 而不是它们的siz ...

  10. 一次xbuild编译失败的排查

    今天一个待上线服务测试完毕,需要构建CI,按照模板配置好包还原,xbuild编译,报错,错误信息如下: EtcdRegister.cs(8,15): error CS0234: The type or ...