高端网站建设_网页图片特效:鼠标悬停暂停播放鼠标移开继续播放-www.yinxi.net
author:一佰互联 2019-04-14   click:243
高端网站建设_网页图片特效:鼠标悬停暂停播放鼠标移开继续播放

  霸气宣言: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.yinxi.net编辑整理,转载请注明出处