이미지 전환 효과를 달성하는 jquery 간단한 방법_jquery
- WBOY원래의
- 2016-05-16 15:59:451032검색
이 기사의 예에서는 jquery가 어떻게 이미지 전환 효과를 간단하게 구현할 수 있는지 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#slider{
position:relative;
overflow:hidden;
margin:20px auto;
height:240px;
width:740px;
padding:5px;
border:2px solid #cdcdcd;
}
#show{
position:relative;
height:240px;
width:740px;
}
#show .img{
width:740px;
height:240px;
margin-bottom:5px;
}
#num{
position:absolute;
right:5px;
top:220px;
}
#num span{
float:left;
display:block;
text-align:center;
width:20px;
height:20px;
line-height:20px;
margin:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:blod;
background:#f2f2f2;
border:1px solid #D78918;
color:#D78918;
}
#num .current{
color: #fff;
width:21px;
height:21px;
line-height:21px;
font-size: 16px;
border:0px;
margin:0px 1px;
background-color: #FF7300;
}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
var count=1;
setInterval(function(){
count=count==5?0:count;
var top=-count*(240+5);
count++;
$("#show").animate({top:top},600);
$("#num").find("span").eq(count-1).addClass("current").siblings().removeClass("current");
},2000);
})
-->
</script>
</head>
<body>
<div id="slider">
<div id="show">
<div class="img" style="background:red;"></div>
<div class="img" style="background:blue"></div>
<div class="img" style="background:gold"></div>
<div class="img" style="background:yellow"></div>
<div class="img" style="background:green"></div>
</div>
<div id="num">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</body>
</html>
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.