图片轮播效果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

js如下：

 1     $(function(){
 2         var wrap=$('.wrap'),
 3             picUl=wrap.children('.pics'),
 4             lis=picUl.children('li'),
 5             len=lis.length,
 6             w=wrap.width(),
 7             nav,navs='',i,
 8             timer=null;
 9         //初始化
10         function init(){
11             picUl.css('width',w*len+'px');
12             nav=$('<ul class="nav"></ul>').appendTo(wrap);
13             for(i=0;i<len;i++){
14                 navs+='<li>'+(i+1)+'</li>';
15             }
16             nav.append(navs);
17             navs=nav.children('li');
18             i=0;
19             action();
20         }
21         //执行动画
22         function action(){
23             if(i==len){
24                 i=0;
25             }
26             if(i<0){
27                 i=len-1;
28             }
29             wrap.animate({ scrollLeft: i * w }, 600);
30             $(navs[i]).addClass('active').siblings('.active').removeClass('active');
31         }
32         //自动播放
33         function next(){
34             timer=setInterval(function(){
35                 i++;
36                 action();
37             },2000);
38         }
39         //绑定事件
40         function bindEvents(){
41             $('.left').on('click',function(){
42                 i--;
43                 action();
44             });
45             $('.right').on('click',function(){
46                 i++;
47                 action();
48             });
49 
50             wrap.on('mouseover',function(){
51                 clearInterval(timer);
52             }).on('mouseout',next);
53 
54             nav.on('click', 'li', function() {
55                 i=$(this).index();
56                 action();
57             });
58         }
59 
60         init();
61         next();
62         bindEvents();