웹 이미지 효과: 마우스 마우스를 마우스로 올려 재생을 멈추거나 마우스를 멀리하여 계속 플레이를 계속합니다

관리자 · 게시됨 2014. 10. 15. 오후 5:02:48

<div class="banner">
<ul class="IMG_list">
<li><a target="_blank"><img src="images/1.jpg" alt="帆布鞋"></a><div class="titDiv"><p class="opacity">帆布鞋</p></div></li>
<li><a target="_blank"><img src="images/2.jpg" alt="针织衫"></a><div class="titDiv"><p class="opacity">针织衫</p></div></li>
<li><a target="_blank"><img src="images/3.jpg" alt="户外"></a><div class="titDiv"><p class="opacity">户外</p></div></li>
<li><a target="_blank"><img src="images/4.jpg" alt="外套"></a><div class="titDiv"><p class="opacity">外套</p></div></li>
<li><a target="_blank"><img src="images/5.jpg" alt="衬衫"></a><div class="titDiv"><p class="opacity">衬衫</p></div> </li>
</ul>
<p class="play_count">
<span class="on_count">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p>
</div>
JS部分：
var timer=null
function showAuto(){
var count=$("#focus_n li").length;
n = n >= (count - 1) ? 0 : n + 1;
$("#focus_n li").eq(n).trigger('mouseover');
}
var t = n = count = 0;
$(function(){
$("#focus_m li:not(:first-child)").hide();
$("#focus_n li").mouseover(function(){
$(this).addClass('active').siblings().removeClass('active');
count = $(this).parents().find('#focus_m li').length;
var i=$(this).parent().find('li').index(this);
n = i;
if (i >= count) return;
$(this).parents().find('#focus_m li').stop(false,true).filter(":visible").fadeOut().parent().children().eq(i).fadeIn();
});
window.timer = setInterval("showAuto()", 5000);
/*$(".banner").click(function(){
clearInterval(timer)},
function(){timer = setInterval("showAuto()", 5000);
});*/ //这个是错的，因为鼠标点击之后，5秒之后并不能实现继续滚动
$('.banner').mouseover(function(){
clearTimeout(timer);
window.setTimeout(function(){timer = setInterval("showAuto()", 5000)});
})
/*$(".banner").mouseover(function(){
clearInterval(timer);
});
$(".banner").mouseout(function(){
timer = setInterval("showAuto()", 2000);
}); */ //这个是也错的，因为鼠标点击之后，5秒之后只能滚动一次
})

코드 복사

[HTML/HTML5] 웹 이미지 효과: 마우스 마우스를 마우스로 올려 재생을 멈추거나 마우스를 멀리하여 계속 플레이를 계속합니다

관련 게시물

본 섹션