简单轮播图效果
<script> $(".banner a").mouseover(function(){ $(".banner a") .removeClass("nowa") $(this) .addClass("nowa") var x=$(".banner a").index($(this)); $(".banner img").hide(); $(".banner img").eq(x).show(); }) $(function(){ /*1秒钟换一张图显示*/ var n=0; function changeImg(){ if(n<4){ n++; }else{ n=0; } $(".banner img").hide(); $(".banner img").eq(n).show(); } var timer = setInterval(changeImg,3000); /*鼠标经过box时，停止；鼠标离开box，开始*/ $(".banner").mouseover(function(){ clearInterval(timer); }).mouseout(function(){ timer = setInterval(changeImg,3000); }) }) </script>html <div class="banner"> <img style="display:block;" src="banner-1.png"> <img src="banner-2.png"> <img src="banner-3.png"> <img src="banner-4.png"> <img src="banner-5.png"> <a class="" href="" style="left:486px;"></a> <a class="" href="" style="left:536px;"></a> <a class="" href="" style="left:586px;"></a> <a class="" href="" style="left:636px;"></a> <a class="" href="" style="left:686px;"></a> </div>
if点击某标签 {do}
if点击空白处 {do}
$(function(){ $("点击标签").click(function(event){ var e=window.event || event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } //点击标签后的操作 }); $("弹窗标签").click(function(event){ var e=window.event || event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } }); document.onclick = function(){ //点击弹窗外 空白地的操作 }; })弹窗 固定居中css
.mod_wepay { border: solid 2px; position: fixed; top: 50%; left: 50%; max-width: 630px; height: auto; z-index: 2000; visibility: hidden; overflow-x:hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }弹窗 - 遮盖层 透明css
.ban { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; opacity: 1; display: none; background: rgba(220, 220, 220, 0); transition: all 0.3s; }