Jquery制作--焦点图左右轮播

公司项目经常用到轮播焦点图，于是自己写了一个纯jq形式的横向轮播焦点图，可点击小圆点或者左右按钮进行切换，属于定宽类型。改成自适应宽度的也不难，将css里面的bannerCon宽度改为百分比，再在js里面将ul和li的宽度跟随父级容器的宽度变化即可，需要用到$(window).resize，目前公司暂时没用到，就先放这个定宽的出来啦。

兼容到IE6+以上浏览器，有轮播速度和切换间隔两个参数可以改。效果图如下：

Html代码如下：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>banner图</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 clearfix">
          <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 {
    position: relative;
    height: 400px;
    overflow: hidden;
}
.banner .bannerCon {
    position: absolute;
    top: 0;
    left: 50%;
    width: 800px;
    height: 400px;
    margin-left: -400px;
    overflow: hidden;
}
.bannerCon .imgList {
    position: absolute;
    top: 0;
    left: 0;
    width: 99999px;
    height: 400px;
}
.bannerCon .imgList li {
    float: left;
    width: 800px;
    height: 400px;
}
.bannerCon .imgList li a {
    position: relative;
    display: block;
    height: 100%;
}
.bannerCon .imgList li img {
    width: 800px;
    height: 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: 2;
    _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 Scroll(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"),
            $btnPre = $box.children(".prev"),
            $btnNex = $box.children(".next"),
            n = $imgLi.length,
            width = $imgLi.width(),
            left = parseFloat($imgUl.css("left")),
            k = 0,
            Player;
            $imgUl.css("width",n*width);
            function scroll(){                //轮播事件
                $imgUl.stop().animate({left:-width},speed,function(){
                    k += 1;
                    $imgUl.css("left",0);
                    $imgUl.children("li:first").appendTo($(this));
                    $btnLi.removeClass('cur');
                    if(k >= n){
                        k = 0;
                    }
                    $btnUl.children("li").eq(k).addClass('cur');            
                });
            }
            $btnLi.click(function(){          //小圆点点击事件
                var index = $btnLi.index(this);    
                $(this).addClass('cur').siblings("li").removeClass('cur');
                if(index >= k){
                    var dif = index-k;
                    left = -dif*width;
                    $imgUl.stop().animate({left:left},speed,function(){
                        $imgUl.css("left",0);
                        $imgUl.children("li:lt("+dif+")").appendTo($imgUl);    
                    });
                }
                else{
                    var j = n-(k-index);
                    $imgUl.css("left",(index-k)*width);
                    $imgUl.children("li:lt("+j+")").appendTo($imgUl);
                    $imgUl.stop().animate({left:0},speed);    
                }
                k = index;
            });    
            $btnPreNex.click(function(){      //左右按钮点击事件
                var index = $btnLi.index(this);        
                if($(this).hasClass('next')){
                    if(!$imgUl.is(":animated")){
                        k += 1;
                        $imgUl.animate({left:-width},speed,function(){
                            $imgUl.css("left",0);
                            $imgUl.children("li:first").appendTo($(this));
                            if(k >= n){
                                k = 0;
                            }
                            $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
                        });
                    }
                }
                else {
                    if(!$imgUl.is(":animated")){
                        k += -1;
                        $imgUl.css("left",-width);
                        $imgUl.children("li:last").prependTo($imgUl);
                        $imgUl.stop().animate({left:0},speed);
                        if(k < 0){
                            k = n-1;
                        }
                        $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
                    }
                }
            });        
            $box.hover(                     //鼠标移入、移出事件
                function(){
                    clearInterval(Player);
                    $btnPreNex.addClass('show');
                },
                function(){
                    Player = setInterval(function(){scroll()},interval);
                    $btnPreNex.removeClass('show');
                }
                );
            Player = setInterval(function(){scroll()},interval);
        });
    }    
    $(function () {                           //读取轮播事件
        Scroll("bannerCon",600,4000);
    });

View Code

注意加载一下jq库，我用的是1.9.1的，其实1.7+的都没问题的。如果觉得对你们有帮助，就给个赞哈~~~