【转】图片轮播效果2

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

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