图片轮播效果2

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

html如下：

 1 <div class="container">
 2     <div class="wrap">
 3         <div class="left" title="前一张"><i class="icon-left-open"></i></div>
 4         <div class="right" title="后一张"><i class="icon-right-open"></i></div>
 5         <ul class="pics">
 6             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetbudalagongrc1.jpg" /></li>
 7             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetzhongjiaolukang3.jpg" /></li>
 8             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetbudalagongyejing2.jpg" /></li>
 9             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorl1.jpg" /></li>
10             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorc16.jpg" /></li>
11             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorl13.jpg" /></li>
12             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorl14.jpg" /></li>
13             <li><img src="http://oncse3u6r.bkt.clouddn.com/tibetnamucuorl15.jpg" /></li>
14         </ul>
15     </div>
16 </div>

css如下：

<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>

View Code