<style type="text/css">
    img{
      width: 100%;
    }
    .clear{
      content: "";
      display: block;
      clear: both;
    }
    .content{
      height: 330px;overflow: hidden;
    }
    要给子div足够的长度容纳所有图片
    .content_list{
       width: 8000px;height: 100%;
    }
    .content_list li{
      margin:5px;float: left;width: 6%;height: 100%;
    }
  </style>

<div class="layui-fluid">
        <div class="layui-row layui-col-space10">
          <div class="content">
            <ul class="content_list">              
              <li>
                <img src="{$admin}/images/1.png">
              </li>
              <li>
                <img src="{$admin}/images/2.png">
              </li>
              <li>
                <img src="{$admin}/images/3.png">
              </li>
              <li>
                <img src="{$admin}/images/4.png">
              </li>
              <li>
                <img src="{$admin}/images/5.png">
              </li>
              <li>
                <img src="{$admin}/images/6.png">
              </li>
              <li>
                <img src="{$admin}/images/7.png">
              </li>
              <p class="clear"></p>
            </ul>
          </div>
        </div>
      </div>
    </div>

<script type="text/javascript">
  // 图片数量
  var num=0;
  setInterval(function(){
    if(num<5){
       num++;
    }else{
       num=0;
    }
    move=num*-300+"px";
    console.log(move)
    $(".content_list").animate({'marginLeft':move},"slow")
   
  },2000)
</script>
       ///轮播
        $(function () {           
            slide();
            function slide() {                 
                timer = setInterval(function() {
                    next();               
                },200000)
            }

            $(".case_btnright").click(function() {
                next();
            });
$(".case_btnleft").click(function() {
    pre();
});
var moveoffset=348;
var num = 0;
function next() {   
    num++;    
    if (num > 3) {
        $(".content_list").animate({
            marginLeft: -(num) * moveoffset
        },1000);          
        num = 0;
        $(".content_list").animate({
            marginLeft: 0
        },0);
    }
    $(".content_list").animate({
        marginLeft: -(num) * moveoffset
    },1000);

}
        function pre() {             
            num--;         
            if (num < 0) {
                num = 3;
                $(".content_list").animate({
                    marginLeft: -(num + 1) * moveoffset
                },0);
            }
            $(".content_list").animate({
                marginLeft: -(num * moveoffset)
            },1000);       
        }
    })