当前位置：搜档网 › banner图片轮显特效代码

banner图片轮显特效代码

这个图片焦点图切换的网页特效代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.sodocs.net/doc/aa7120706.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.sodocs.net/doc/aa7120706.html,/1999/xhtml">
<head>
<title>图片特效上下切换的图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<style type="text/css">
body,td,th{
font-size:12px;
line-height:22px;
}
div#MainPromotionBanner{
margin:80px auto;
border:3px solid #999;
padding:4px;
overflow:hidden;
width:490px;
height:305px;
background:#FFF;
}
#MainPromotionBanner #SlidePlayer{
position:relative;
margin:0 auto;
}
#SlidePlayer a{
padding:0;
}
#MainPromotionBanner .Slides{
padding:0;
margin:0;
list-style:none;
height:305px;
overflow:hidden;
}
#MainPromotionBanner .Slides li{
float:left;
width:490px;
height:305px;
}
#MainPromotionBanner .Slides img{
border:0;
display:block;
width:490px;
height:305px;
}
#MainPromotionBanner .SlideTriggers{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:280px;
right:15px;
z-index:10;
height:25px;
}
#MainPromotionBanner .SlideTriggers li{
float:left;
display:inline;
color:#9B0583;
text-align:center;
line-height:16px;
width:16px;
height:16px;
font-family:Arial;
font-size:.9em;
cursor:pointer;
overflow:hidden;
margin:3px 1px;
border:1px solid #9B0583;
background-color:#fff;
}
#MainPromotionBanner .SlideTriggers li.Current{
color:#fff;
background-color:#9B0583;
border:0;
font-weight:bold;
font-size:1.4em;
line-height:21px;
height:21px;
width:21px;
margin:0 1px;
}
.hackbox{
clear:both;
border-top:transparent 0px solid;
}
</style>
</head>
<body>

<div id="flashcontent">
<div id="MainPromotionBanner">
<div id="SlidePlayer">
<ul class="Slides">
<li style=""><a target="_blank" href="https://www.sodocs.net/doc/aa7120706.html,"><input class="" type="image" alt="世界名表好礼免费拿！" src="20090806112505431.jpg"/></a></li>
<li style=""><a target="_blank" href="https://www.sodocs.net/doc/aa7120706.html,"><input class="" type="image" alt="存钱罐" src="20090806112512962.jpg"/></a></li>
<li style=""><a target="_blank" href="https://www.sodocs.net/doc/aa7120706.html,"><input class="" type="image" alt="牛尔产品特价刊" src="20090806112519914.jpg"/></a></li>

<li style=""><a target="_blank" href="https://www.sodocs.net/doc/aa7120706.html,"><input class="" type="image" alt="瑞丽女装" src="20090806112532861.jpg"/></a></li>
<li style=""><a target="_blank" href="https://www.sodocs.net/doc/aa7120706.html,"><input class="" type="image" alt="饰品" src="20090806112538511.jpg"/></a
></li>
</ul>
<div class="hackbox"></div>
</div>
<div class="hackbox"></div>
</div>
<div class="hackbox"></div>
</div>
<script src="yui.js" type="text/javascript"></script>
<script src="https://www.sodocs.net/doc/aa7120706.html,/js/jquery.js" type="text/javascript"></script>
<script src="tbar.js" type="text/javascript"></script>
<script type="text/javascript">
//Author: https://www.sodocs.net/doc/aa7120706.html,
TB.widget.SimpleSlide.decorate('SlidePlayer', {eventType:'mouse', effect:'scroll'});
</script>
</body>
</html>

banner图片轮显特效代码

相关文档

最新文档