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

兼容到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. Docker初体验

    ## Docker初体验 安装 因为我用的是mac,所以安装很简单,下载dmg下来之后拖拽安装即可完成. 需要注意的就是由于之前的docker是基于linux开发,不支持mac,所以就出现了docke ...

  2. Linux线程基础

    复习中掌握线程的基本管理即可,而不用考虑线程的同步: 创建线程花费的代价,比创建进程小得多,所以同一个进程的,多个线程执行多个任务-->比多个进程执行多个任务更有效率. 线程也分为用户级线程.内 ...

  3. BZOJ1298[SCOI2009]骰子的学问

    Description Input 第一行为两个整数n, m.第二行有n个整数,为a1,a2, -, an. Output 包含n行,每行m个1~n×m的正整数,各不相同,以空格分开.如果有多解,输出 ...

  4. [LeetCode] Longest Repeating Character Replacement 最长重复字符置换

    Given a string that consists of only uppercase English letters, you can replace any letter in the st ...

  5. 将字符串中的URL 解析，获取内容

    parse_str() : parse_str("name=Bill&age=60"); echo $name."<br>";//Bill ...

  6. Theano Inplace

    Theano Inplace inplace Computation computation that destroy their inputs as a side-effect. Example i ...

  7. Android自定义属性简单使用说明

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_attrs.html 本文从实用角度说明Android自定义属性的基本使用流程,清晰 ...

  8. IDF-CTF-牛刀小试-啥？

    本人属于Web安全这一块的小白,稍微了作了一下知识补充就开始了CTF,其中的有很多不懂但看多了网上大牛的解题办法和思路.便开始有了一些要想动手记录的冲动,希望大家共同进步学习,本文能对读者有所帮助~ ...

  9. Mysql 查看、创建、更改 数据库和表

    一.一探究竟 我想看看有多少个数据库,有多少个表,以及表里有啥东西.那么你可以这样: 图形界面: 命令: 查看多少个数据库:注意 后面带s #查看 SHOW DATABASES; #查看表 USE b ...

  10. Python之路【第二十四篇】Python算法排序一

    什么是算法 1.什么是算法 算法(algorithm):就是定义良好的计算过程,他取一个或一组的值为输入,并产生出一个或一组值作为输出.简单来说算法就是一系列的计算步骤,用来将输入数据转化成输出结果. ...