标签：lock 事件 click hover log oct timer doc find
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>gakki</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html, body{
position: relative;
width: 100%;
height: 100%;
}
#wrap{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 512px;
height: 384px;
}
#wrap .inner{
width: 100%;
height: 100%;
cursor: pointer;
}
#wrap .bgPicture{
width: 100%;
height: 100%;
background: url(‘http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg‘) 50% 50% no-repeat;
}
#wrap .pic{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
}
#wrap .pic .inner{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
list-style: none;
}
#wrap .icon{
position: absolute;
left: 50%;
top: 90%;
transform: translate(-50%, -50%);
height: 18px;
line-height: 18px;
}
#wrap .icon span{
display: inline-block;
width: 10px;
height: 10px; /*不知道为什么span和span之间有8px间距*/
border-radius: 50%;
border: 1px solid #d67ed6;
z-index: 2;
}
#wrap .icon span:hover{
background-color: #d67ed6;
opacity: 0.2;
filter: alpha(opacity=20);
}
#wrap .icon span.active{
background-color: #d67ed6;
opacity: 0.6;
filter: alpha(opacity=60);
height: 15px;
border-radius: 30%;
}
#wrap .arrow{
position: absolute;
width: 30px;
height: 50px;
background-color: rgba(150,150,150,0.5);
border-radius: 5px;
text-align: center;
line-height: 50px;
font-size: 22px;
font-weight: bold;
color: #fff;
z-index: 2;
}
#wrap .arrow:hover{
background-color: rgba(150,150,150,0.7);
color: #ddd;
}
#wrap .pre{
left: 1%;
top: 50%;
transform: translateY(-50%);
}
#wrap .next{
right: 1%;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
<div class="bgPicture"></div>
<div class="pic">
<a href="http://www.qdfuns.com/notes/27497/81d5010245e3a9225e21f8d3a9b475a6.html" target="_blank"><div class="inner"></div></a>
</ul>
<div class="icon">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="arrow pre"><</div>
<div class="arrow next">></div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var n = 0;
var $wrap = $("#wrap"),
$btn = $wrap.find(‘.icon>span‘),
$bgPic = $wrap.find(‘.bgPicture‘),
$link = $wrap.find(‘.pic a‘);
var url = ["http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236ugj2glgcl6g66gg4.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236c26bx5bbfp6kazzm.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236oqd8i8q158ojr0i7.jpg","http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236o1iud19lkz11wqja.jpg"],
href = ["http://www.qdfuns.com/notes/27497/81d5010245e3a9225e21f8d3a9b475a6.html","http://www.qdfuns.com/notes/27497/97b77870e523299cbf2be9ebf6023e00.html","http://www.qdfuns.com/notes/27497/d158ce3e48cd86b2d2ab5182ca65b7ad.html","http://www.qdfuns.com/notes/27497/7ec7ce8bcc074fe3c721b59cfcf7cb52.html","http://www.qdfuns.com/notes/27497/1b763c1383ac0d2a1f3927557379b63b.html"];
/*span按钮的函数&调用picFade函数*/
function slide(){
n = n>=$btn.length-1?0:++n;
$btn.eq(n)
.siblings().removeClass(‘active‘)
.end().addClass(‘active‘);
picFade();
}
/*封装图片淡入淡出函数*/
function picFade(){
var curHref = href[n];
var curUrl = url[n];
$bgPic.fadeTo(‘slow‘, 0.4, function() {
$bgPic.css(‘background-image‘, ‘url("‘+curUrl+‘")‘)
.fadeTo(‘slow‘, 1, function(){
$link.attr(‘href‘, curHref);
});
});
}
/*自动轮播*/
var timer = setInterval(slide, 5000);
/*小按钮绑定点击事件*/
$btn.on(‘click‘, function(event) {
clearInterval(timer);
n = $(this).index()-1;
slide();
timer = setInterval(slide, 5000);
});
/*向前前后按钮绑定事件*/
$wrap.find(‘.arrow‘).on(‘click‘, function(event) {
if (!$bgPic.is(‘:animated‘)) {
clearInterval(timer);
n = $(this).hasClass(‘pre‘)?n-2:n;
if (n<0) {n=n+5}
slide();
timer = setInterval(slide, 5000);
}
});
});
</script>
</body>
</html>
标签：lock 事件 click hover log oct timer doc find
原文地址：http://www.cnblogs.com/wangshoubai/p/6127329.html
