【前端】图片自动轮播，可控制轮播方向（与uikit结合使用）

介绍：

产品图自动轮播

鼠标悬于左右箭头上方的时候自动切换轮播方向

鼠标悬于产品图上方的时候停止轮播，让用户可以查看产品信息，鼠标移开，继续轮播

注意点：

ul中切勿使用uikit中的uk-grid，否则反向轮播的过程中到第一个产品就会一直闪烁，不继续展示前面的产品

代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.3/css/uikit.min.css" rel="stylesheet">
<script type="text/javascript" src="http://goodyard.cn/public/static/index/js/uikit.min.js"></script>
<style type="text/css">
  .marquee-wrap{
        width: 1140px;
        height: 350px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
    .marquee-wrap ul{
        position: absolute;
        left: 0;
        top: 0;
    }
    .marquee-wrap ul li{
        float: left;
        width: 286px;
        height: 150px;
        list-style: none;

    }
    .marquee-wraps{
        position: relative;
    }
    .marquee-wraps a:first-child{
        position: absolute;
        left: 0;
        /*top: 75px;*/
        z-index: 10;
    }
    .marquee-wraps a:nth-child(2){
        position: absolute;
        right: 0;
        /*top: 75px;*/
        z-index: 10;
    }
  .black h5 {color: #000;}
  .black a:hover p {color: black;}
  #left{position:absolute;left:22px;top:150px;}
  #right{position:absolute;left:1210px;top:150px;}
</style>
<div class="marquee-wraps" id="marquee-wraps">
</div>
<div class="previous_next">
  <a id="left" class="uk-position-center-left uk-slidenav-large " uk-slidenav-previous uk-slideshow-item="previous" ></a>
</div>
<div class="uk-position-relative uk-light black marquee-wrap" id="marquee-wrap" uk-slider>
 <ul class="uk-slider-items  online_shop_pro uk-margin-top uk-text-center" id="ul">
  <li class="uk-width-1-4 li">
    <a target="_blank" >
      <img src="http://goodyard.cn/public/static/index/slider-shop/42151-remy-human-hair-wefts-extensions.png" alt="">
      <h5>产品</h5>
      <p>US$1.00</p>
    </a>
  </li>
  <li class="uk-width-1-4 li">
    <a target="_blank" >
      <img src="http://goodyard.cn/public/static/index/slider-shop/42150-20-remy-human-hair-extension.png" alt="">
      <h5>产品</h5>
      <p>US$79.00</p>
    </a>
  </li>
  <li class="uk-width-1-4 li">
    <a target="_blank" >
      <img src="http://goodyard.cn/public/static/index/image/wig.jpg" alt="">
      <h5>产品</h5>
      <p>US$1.00</p>
    </a>
  </li>
  <li class="uk-width-1-4 li">
    <a target="_blank" >
      <img src="http://goodyard.cn/public/static/index/slider-shop/42148-hot-sell-eyelash-extensions.png" alt="">
      <h5>产品</h5>
      <p>US$1</p>
    </a>
  </li>
  <li class="uk-width-1-4 li">
    <a target="_blank" >
      <img src="http://goodyard.cn/public/static/index/slider-shop/42147-3d-mink-fur-eyelash.png" alt="">
      <h5>产品</h5>
      <p>US$1</p>
    </a>
  </li>
  <li class="uk-width-1-4 li">
    <a target="_blank" >
      <img src="http://goodyard.cn/public/static/index/slider-shop/42183-ng-toupee.png" alt="">
      <h5>产品</h5>
      <p>US$1.00</p>
    </a> 
  </li>
  <li class="uk-width-1-4 li">
    <a target="_blank" >
      <img src="http://goodyard.cn/public/static/index/slider-shop/42145-star-synthetic-lace-front-wig.png" alt="">
      <h5>产品</h5>
      <p>US$1.00</p>
    </a>
  </li>
  <li class="uk-width-1-4 li">
    <a target="_blank">
      <img src="http://goodyard.cn/public/static/index/slider-shop/42151-remy-human-hair-wefts-extensions.png" alt="">
      <h5>产品</h5>
      <p>US$1.00</p>
    </a>
  </li>
  </ul>
</div>
<div class="previous_next">
  <a id="right" class="uk-position-center-right uk-slidenav-large" uk-slidenav-next uk-slideshow-item="next" ></a>
</div>
<script>
  window.onload=function()
  {
    var oDiv=document.getElementById('marquee-wrap');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    var speed=-2;
    oUl.innerHTML+=oUl.innerHTML;
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    function move(){
      if(oUl.offsetLeft<-oUl.offsetWidth/2){
        oUl.style.left='0';
        }
      if(oUl.offsetLeft>0){
        oUl.style.left=-oUl.offsetWidth/2+'px';
        }
      oUl.style.left=oUl.offsetLeft+speed+'px';
      }
    var timer=setInterval(move,30);
    oDiv.onmouseover=function()
    {
      clearInterval(timer);
    };
    oDiv.onmouseout=function()
    {
      timer=setInterval(move,30);
    };
    document.getElementById('left').onmouseover=function(){
        speed=-2;
      }
    document.getElementById('right').onmouseover=function(){
        speed=2;
      }
  };
</script>