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

兼容到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. Referenced file contains errors (http://www.springframework.org/schema...错误

    Referenced file contains errors (http://www.springframework.org/schema...错误 Referenced file contains ...

  2. rxjs5.X系列 —— transform系列 api 笔记

    欢迎指导与讨论:) 前言 本文是笔者翻译 RxJS 5.X 官网各类operation操作系列的的第一篇 -- transform转换.如有错漏,希望大家指出提醒O(∩_∩)O.更详细的资料尽在rxj ...

  3. odoo种种

    [精]Odoo 8.0深入浅出开发教程-模块开发基础 http://blog.csdn.net/sunansheng/article/details/50864527 搭建odoo开发调试环境 htt ...

  4. jq方法中 $(window).load() 与 $(document).ready() 的区别

    通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

  5. BZOJ1192 [HNOI2006]鬼谷子的钱袋

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  6. iOS10权限设置问题以及xcdoe8更新细节问题

    <key>NSVideoSubscriberAccountUsageDescription</key> <string></string> <ke ...

  7. linux的用户与用户组

    1.上面这个花花绿绿的图片,来自linxu 下etc/passwd文件. 我们来详细的看下这些都值得是什么东西,这些内容都是用冒号来分割的. 2.etc/shadow 3.对比一下这两个文件的权限,为 ...

  8. python面向对象一

    1.1三种编程方法论 1.面向过程:把复杂的任务一步一步分解成简单的任务. 2.函数式编程:思想上接近于数学运算,根据某种方式,根据方式得出的结果. 3.面向对象编程:一种编程方式,需要使用" ...

  9. [转] mysql 存储引擎

    最常用的存储引擎 innodb MyISAM MyISAM,这种效率高,不支持事务,不支持外键,每个表有单独的存储文件(多个),方便管理. innodb,一般默认的都是innodb,效率也不低,支持事 ...

  10. easyUI combobox 控件 使用

    1,combobox 二级联动 (参数传递 函数调用) // toolbar 学校班级二级联动 var paramSearch = { school : $('#search-school'), cl ...