jquery簡單實現圖片切換效果的方法

2024-05-06 16:19:59

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jquery簡單實現圖片切換效果的方法,涉及jQuery鏈式操作及圖片操作的相關技巧,需要的朋友可以參考下

本文實例講述了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">



</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>