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

兼容到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. webgl画个点

    function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(c ...

  2. [LeetCode] Longest Palindrome 最长回文串

    Given a string which consists of lowercase or uppercase letters, find the length of the longest pali ...

  3. redis分片

    本文是在window环境下测试 什么是分片 当数据量大的时候,把数据分散存入多个数据库中,减少单节点的连接压力,实现海量数据存储 那么当多个请求来取数据时,如何知道数据在哪个redis呢,redis有 ...

  4. 实现css两端对齐

    如何实现css的两端对齐功能? 最近做项目遇到这种情况,如图所示: input左边框的用户,旧密码,新密码,确认密码无法对齐,样式很丑. 解决办法: 找到对应的类名,加上:text-align:jus ...

  5. int[] convert byte[]

    private void button_Click(object sender, RoutedEventArgs e) { byte[] bytes = this.ConvertIntArrayToB ...

  6. 冰冻三尺非一日之寒--还是web

    第十五章  javascript(js) DOM编程 javascript介绍 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript ...

  7. Oracle中已有数据的字段类型修改

    创建测试表 create table t_person( id varchar2(200) primary key, name varchar2(200), address varchar2(200) ...

  8. BZOJ3434 [Wc2014]时空穿梭

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

  9. [UWP] 使用SemanticZoom控件

    在写一个看新闻软件的时候,用到了SemanticZoom控件,遇到了一些问题,比如如何根据首字母分类,以及放大视图中有数据的和没数据的通过背景色或前景色区分,幸运的是,all solved. 先来个效 ...

  10. winform总结3> 有趣的bat/winform程序完成自己的任务，然后把自己删除

    在winform的开发过程中往往会有这样的应用场景,执行完成某任务之后,程序需要把本身删除掉.比如卸载.分享一个比较简单实现. 思路就是利用批处理,关闭文件后执行bat,bat执行删除主文件,然后删除 ...