js效果

简单轮播图效果

<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;
}