图片轮播效果2

再次写了个焦点图的轮播效果，

效果：http://edwardzhong.github.io/blog/2014/11/01/slicPics2.html

更多：http://edwardzhong.github.io/blog/

html如下：

<div class="container">
    <div class="wrap">
        <div class="left" title="前一张"><i>&lt;</i></div>
        <div class="right" title="后一张"><i>&gt;</i></div>
        <ul class="pics">
            <li><img src="../images/Chrysanthemum.jpg" alt="" /></li>
            <li><img src="../images/Desert.jpg" alt="" /></li>
            <li><img src="../images/Hydrangeas.jpg" alt="" /></li>
            <li><img src="../images/Jellyfish.jpg" alt="" /></li>
            <li><img src="../images/Koala.jpg" alt="" /></li>
            <li><img src="../images/Lighthouse.jpg" alt="" /></li>
            <li><img src="../images/Penguins.jpg" alt="" /></li>
            <li><img src="../images/Tulips.jpg" alt="" /></li>
        </ul>

    </div>
</div>

样式如下：

<style>
    .clearfix:after{
        content: ‘.‘;
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
    .clearfix{zoom:1;}
    .container{
        position: relative;
        width: 400px;height: 300px;
        margin: 0 auto;
    }
    .wrap{
        width: 100%;height: 100%;
        overflow: hidden;
    }
    .left,.right{
        position: absolute;
        z-index: 1;
        width: 50%;
        height: 100%;
        background-color: transparent;
        cursor: pointer;
    }
    .left i,.right i{
        position: absolute;
        font-style: normal;
        font-size: 50px;
        font-weight: bold;
        color: #ccc;
        top: 50%;
        margin-top: -28px;
    }
    .left i{
        left: 5px;
    }
    .right i{
        right: 5px;
    }
    .left{
        float: left;
    }
    .right{
        margin-left: 50%;
    }
    ul{
        list-style-type: none;
        margin: 0;padding: 0;
    }
    ul li{
        margin: 0;padding: 0;
        float: left;
    }
    .pics{
        height: 300px;
    }
    .nav{
        position: absolute;
        z-index: 2;
        right: 0;bottom: 10px;
    }
    .nav li{
        width: 35px;height: 35px;
        line-height: 35px;
        margin-right: 4px;
        text-align: center;
        font-weight: bold;
        font-family: arial;
        border-radius: 50%;
        cursor:pointer;
        color:#fff;
        background: rgba(0,0,0,0.6);
    }
    .nav li:hover{
        background: rgba(0,0,0,1);
    }
    .nav li.active{
        color:#fff;
        background: rgba(0,255,255,0.6);
    }
</style>

js如下：

<script>
    $(function(){
        var wrap=$(‘.wrap‘),
            picUl=wrap.children(‘.pics‘),
            lis=picUl.children(‘li‘),
            len=lis.length,
            w=wrap.width(),
            nav,navs=‘‘,i,
            timer=null;
        //初始化
        function init(){
            picUl.css(‘width‘,w*len+‘px‘);
            nav=$(‘<ul class="nav"></ul>‘).appendTo(wrap);
            for(i=0;i<len;i++){
                navs+=‘<li>‘+(i+1)+‘</li>‘;
            }
            nav.append(navs);
            navs=nav.children(‘li‘);
            i=0;
            action();
        }
        //执行动画
        function action(){
            if(i==len){
                i=0;
            }
            if(i<0){
                i=len-1;
            }
            wrap.animate({ scrollLeft: i * w }, 600);
            $(navs[i]).addClass(‘active‘).siblings(‘.active‘).removeClass(‘active‘);
        }
        //自动播放
        function next(){
            timer=setInterval(function(){
                i++;
                action();
            },2000);
        }
        //绑定事件
        function bindEvents(){
            $(‘.left‘).on(‘click‘,function(){
                i--;
                action();
            });
            $(‘.right‘).on(‘click‘,function(){
                i++;
                action();
            });

            wrap.on(‘mouseover‘,function(){
                clearInterval(timer);
            }).on(‘mouseout‘,next);

            nav.on(‘click‘, ‘li‘, function() {
                i=$(this).index();
                action();
            });
        }

        init();
        next();
        bindEvents();
    });
</script>