标签：
<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}}" >
@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>
标签：
原文地址：http://www.cnblogs.com/beila/p/5611893.html
