//css
<style>
.box1{
border: 5px solid #333;
width: 950px;
height: 540px;
position: relative;
overflow: hidden;
margin-left:280px;
}
.box1 ul li{
float: left;
}
.box1 ul{
width: 2850px;
position: absolute;
}
.box1 ol li{
float: left;
width: 30px;
height: 30px;
border: 1px solid gray;
line-height: 25px;
text-align: center;
cursor: pointer;
border-radius: 50%;
}
.box1 ol{
width: 150px;
height: 100px;
position: absolute;
right: 50px;
bottom: -70px;
}
.lun{
background: write;
}
.info{
background: gray;
}
</style>
//view
<div id="mainbody">
<div class="info" >
<div class="box1">
<ul>
@foreach($picture as $kkk=>$vvv)
<li ><img src="<?php echo $vvv['pic_path']?>" style="width:950px;height=540px;" ></li>
@endforeach
</ul>
<!-- <ol>
<li class="lun">1<li>
<li>2<li>
<li>3<li>
</ol> -->
</div>
</div>
</div>
//script
//轮播图
$(function(){
var boxOlLi = $('.box1 ol li');
var boxUl = $('.box1 ul');
var _now = 0;
boxOlLi.click(function(){
var _this = $(this);
_this.addClass('lun').siblings().removeClass('lun');
var _index = _this.index();
var pian = -_index * 950;
boxUl.animate({left:pian},'slow');
})
var timer = setInterval(fun,4000);
function fun()
{
if(_now < 3)
{
boxOlLi.eq(_now).addClass('lun').siblings().removeClass('lun');
boxUl.animate({left:-_now * 950},'slow');
_now++;
}
else
{
_now = 0;
}
}
$('.box1').mouseover(function(){
clearInterval(timer);
}).mouseleave(function(){
timer = setInterval(fun,4000);
})
})