웹 프런트엔드 윤방기 효과 (표시 및 숨기기)
2842 단어 윤파기
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script type="text/javascript" src="banner/jquery.min.js" ></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul,li{list-style-type:none;}
#banner {height: 280px;width: 800px;margin:0px auto;position:relative;}
#banner img{position:absolute;}
#banner ul,#banner span{top:250px;position:absolute; height:30px; line-height:30px;}
#banner ul{left:400px;}
#banner ul li{float:left; padding:0px 4px; cursor:pointer; color:#666;}
#banner ul li.checked{ /*color:#00F;*/}
#banner span{ background-color:#ccc;opacity:0.3; width:775px; padding-left:25px;}
</style>
</head>
<body>
<div id="banner">
<img src="banner/img/01.jpg" width="800" height="280" alt="111"/>
<img src="banner/img/02.jpg" width="800" height="280" alt="222"/>
<img src="banner/img/03.jpg" width="800" height="280" alt="333"/>
<span></span>
<ul>
<li >⊙</li>
<li>⊙</li>
<li>⊙</li>
</ul>
</div>
</body>
</html>
js
<script>
$(function(){
//
$("#banner img").css("display","none");
$("#banner img").first().css("display","block");
$("#banner li").first().css("color","#00F");
$("#banner span").text($("#banner img").first().attr("alt"));
var index=1;
//
var time=setInterval(banner_fn,1000);
//
$("#banner li").hover(function(){
clearTimeout(time);
banner($(this));
},function(){
var index=$(this).index()+1;
time=setInterval(banner_fn,1000);
})
function banner_fn(){
if(index>=$("#banner li").length) index=0;
banner($("#banner li").eq(index).first());
index++;
}
function banner(obj){
$("#banner li").css("color","#666");
$("#banner li").eq($(obj).index()).css("color","#00F");
$("#banner img").css("display","none");
$("#banner img").eq($(obj).index()).css("display","block");
$("#banner span").text($("#banner img").eq($(obj).index()).attr("alt"));
}
});
</script>좋은 웹페이지 즐겨찾기
