简单轮播图效果
<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>
<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;
}