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

兼容到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. [bzoj3123][sdoi2013森林] (树上主席树+lca+并查集启发式合并+暴力重构森林)

    Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数 ...

  2. 完整部署CentOS7.2+OpenStack+kvm 云平台环境（5）--问题解决

    一.[root@openstack-server ~]# nova listERROR (CommandError): You must provide a username or user id v ...

  3. [LeetCode] Elimination Game 淘汰游戏

    There is a list of sorted integers from 1 to n. Starting from left to right, remove the first number ...

  4. [LeetCode] Letter Combinations of a Phone Number 电话号码的字母组合

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  5. 编译自己的Ubuntu内核

    很多时候我们在使用Ubuntu的时候,想修改一下内核配置,然后编译,安装到Ubuntu中.这也是进行Ubuntu内核开发的前提. 获取当前Ubuntu对应代码 有很多方法可以获得Ubuntu内核代码, ...

  6. 使用markdown

    一.在windows下使用markdown MarkdownPad:MarkdownPad is a full-featured markdown editor for windows. Awsomi ...

  7. php杂项

    php5.3新增闭包函数用法use用法(引入变量地址且随内存中值变化而变化,跳过解析顺序直接获取函数最终值) $obj = (object) "Hello, everyone"; ...

  8. 在Windows平台上绿色安装postgresQL

    本文使用案例:postgresql-9.6.0-beta3-windows-x64-binaries.rar (win64免安装) 环境:window10,postgresql-9.6.0-beta3 ...

  9. 关于SharpDevelop 4版本以上没有ILAsm模板项目问题

    学习CIL的时候遇到的问题,记录一下. 查了一下英文网站,SharpDevelop 3 版本有ILAsm模板,但是有人运行3版本的CIL项目有问题. 说明一下SharpDevelop 4版本添加ILA ...

  10. HTML学习笔记——标签

    最近开始学习前端的一些知识,了解了一下Html和CSS. HTML:是网页内容的载体,它负责的是网页的内涵,也就是网页要呈现的内容,包括了图片,视频还有文字.是网页要加载的东西: CSS:是样式表现, ...