介绍:
产品图自动轮播
鼠标悬于左右箭头上方的时候自动切换轮播方向
鼠标悬于产品图上方的时候停止轮播,让用户可以查看产品信息,鼠标移开,继续轮播
注意点:
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>