JavaScript 图片切换展示效果alibaba拓展版
2010-09-14 13:29:03 来源：WEB开发网运行可以看到效果
<!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>JavaScript 图片切换展示效果</title>
</head>
<body>
<style type="text/css">
.container, .container *{margin:0; padding:0;}
.container{width:408px; height:168px; overflow:hidden;}
.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;}
.slider2{width:2000px;}
.slider2 li{float:left;}
.num{ position:absolute; right:5px; bottom:5px;}
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
<li><img src=http://tech.ddvip.com/2008-12/"1.jpg"/></li>
<li><img src=http://tech.ddvip.com/2008-12/"2.jpg"/></li>
<li><img src=http://tech.ddvip.com/2008-12/"3.gif"/></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
Tags：JavaScript 图片 切换
编辑录入：爽爽 [复制链接] [打 印]
中查找“JavaScript 图片切换展示效果alibaba拓展版”更多相关内容
中查找“JavaScript 图片切换展示效果alibaba拓展版”更多相关内容更多精彩
赞助商链接
