Jquery制作--焦点图淡出淡入

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

兼容到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="images/banner01.jpg" alt=""/></a></li>
          <li><a href="#"><img src="images/banner02.jpg" alt=""/></a></li>
          <li><a href="#"><img src="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: 0;
    padding: 0;
}
ul, ol {
    list-style: none;
}
img { border:none; }
a,button{ outline: none; }
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
} 
/* 具体样式 */
.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: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e2f6fd; /* 这个背景是为了展示宽度大于图片宽度时的区域，可以删除 */
    z-index: 1;
}
.bannerCon .imgList li a {
    display: block;
    height: 100%;
    text-align: center;
}
.imgList li a img {
    position: absolute;
    top: 0;
    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: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 12px;
    text-align:center;
    z-index: 6;
    _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; }

View Code

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);
    });

View Code

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