js简单轮播图

 #tab {
    overflow: hidden;
    width: 100%;
    position: relative;
    float: left;
} 
#tab>img:not(:first-child) {
    display: none;
}
<div id="tab">
    @foreach ($pdt_images as $pdt_image)
       <img src="{{$pdt_image->image_path}}" width="100%" height="20%" class="carouselimgs">
    @endforeach
</div>

<script>

        var interval;
        var pos = 0;
        window.onload = function() {
            var images = document.getElementsByClassName('carouselimgs');
            var tab = document.getElementById("tab");
            tab.onmouseover = function() {
                clearInterval(interval);
            }
            tab.onmouseout = function() {
                run(images);
            }
            run(images);
        }
        var run = function(images) {
            interval = setInterval(function() {
                images[pos].style.display = 'none';
                pos = ++pos == images.length ? 0 : pos;
                images[pos].style.display = 'inline';
            }, 3000);
        }

 </script>

鼠标放上去轮播

<script>
        var interval;
        var pos = 0;
        window.onload = function() {
            var images = document.getElementsByTagName('img');
            var tab = document.getElementById("tab");
            tab.onmouseover = function() {
                run(images);
            }
            tab.onmouseout = function() {
                clearInterval(interval);
            }
        }
        var run = function(images) {
            interval = setInterval(function() {
                images[pos].style.display = 'none';
                pos = ++pos == images.length ? 0 : pos;
                images[pos].style.display = 'inline';
            }, 1000);
        }
    </script>