图片轮播

<style>
body{
    margin:0;
    padding:0;
}
.wrap ul{
    padding-left:0;
    width:400px;
    overflow: hidden;
}
li{
    list-style-type: none;
    width:3000px;
}
.wrap{
    width:400px;
    margin-top:20px;
    margin-left:400px;
    position: relative;
}
.oll li{
    float: left;
    width:16px;
    height:16px;
    line-height: 16px;
    text-align:center;
    border:yellow 2px solid;
    background: orange;
    color:white;
    margin-right:3px;
    cursor: pointer;
}
.oll{
    position: absolute;
    bottom:0;
    right:4px;
}
.oll li.current{
    background: white;
    color:red;
}
.friend{
    width:640px;
    margin-top:50px;
    margin-left:300px;
}
</style>
    <center><script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script></center>
<div class="wrap">
    <ul onblur="stop()">
        <li id="lun">
            @foreach($data as $val)
            <img width="400px" height="200px" src="http://localhost/laravel/public/{{$val->img_name}}" alt="">
            @endforeach
        </li>
    </ul>
    <ol class="oll">
        <li class="es">1</li>
        <li class="es">2</li>
        <li class="es">3</li>
        <li class="es">4</li>
        <li class="es">5</li>
    </ol>
</div>

<script src="http://localhost/laravel/public/js/jquery-2.1.4.min.js"></script>
<script>
    $(function(){
        num = 0;
        setInterval('lun()',2000);
    })
    function lun()
    {
        var off = $("#lun").offset().left;
        if(parseInt(off)*-1<=1000)
        {
            if(num>=4)
            {
                num = 0;
            }
            num++;
            $(".es").eq(num).addClass('current');
            $(".es").eq(num).siblings().removeClass('current');
            $("#lun").animate({'margin-left':'-=406px'});
        }
        else
        {
            // $("#lun").animate({'margin-left':'+=200px'});
            $(".es").eq(0).addClass('current');
            $(".es").eq(0).siblings().removeClass('current');
            $("#lun").offset({'left':'400'});
        }
    }
    
    // function stop()
    // {
        
    // }
</script>