信鸽网

jquery简单实现图片切换效果的方法

  作者：bea

本文实例讲述了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>&l

本文实例讲述了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: