轮播图

//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);
  })
})