高端网站建设_网页图片特效:鼠标悬停暂停播放鼠标移开继续播放 霸气宣言：banner图片，鼠标悬停暂停播放，鼠标移开继续播放 作品类型：动态效果（动态JS、jQuery作品） 作品描述：banner图片，鼠标悬停暂停播放，鼠标移开继续播放 制作思路：banner图片，鼠标悬停暂停播放，鼠标移开继续播放 <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秒之后只能滚动一次 }) 鼠标悬停，暂停播放。鼠标移开继续播放。是接着当前页继续播放哦。 这个效果目前是有问题。请大家帮帮忙。 文章由重庆一佰互联高端网站建设http://www.rzxsoft.cn编辑整理，转载请注明出处
