当前页:网页制作 >>>在DW里制作图片轮番显示效果四(源文件下载)
在DW里制作图片轮番显示效果四(源文件下载)
责任编辑:黄舒奇  发表时间:2007-09-20  最后修改时间2016-05-25
简介:本效果适合做最新或热门展示,如:新产品展示,新作品展示,新图片展示等。在Firefox和Opera浏览器中只支持淡入淡出效果。
演示:
单击浏览
调用方法
一、右击并另存下列图片和文件到指定文件夹

二、在网站<head></head>之间插入以下CSS代码:
<style type="text/css">
<!--
#clear{clear:both;visibility:hidden;}
#divkz{float:left;}
#divky{float:rightright;}
.mds{clear:both;border-right:#c3d8e3 1px solid;border-left:#c3d8e3 1px solid;border-bottom:#c3d8e3 1px solid;}
.mds .image_list_box ul{padding:0px;font-size:12px;margin:0px;line-height:150%;font-family:"宋体";clear:both;margin-right:-10px;zoom:1;list-style-type:none;}
.mds .image_list_box ul li{float:left;margin:4px 4px 0px 0px;zoom:1}
.mds .image_list_box ul li .image{border-right:#999 1px solid;padding-right:0px;border-top:#999 1px solid;padding-left:0px;background:#fff;padding-bottom:0px;OVERFLOW:hidden;border-left:#999 1px solid;width:120px;CURSOR:pointer;padding-top:0px;border-bottom:#999 1px solid;height:100px;text-align:center;}
.mds .image_list_box ul li .text{padding:4px 4px 0 4px;text-align:center;}
-->
</style>
三、在网站<body></body>之间需加入本效果的地方插入以下HTML代码:

<script src="js/image_transform.js" type="text/javascript"><script src="js/image_transform.js" type="text/javascript"></script>
<div>
<!--下行设置总宽度和高度,总高度等与标是高度加轮换区高度-->
<div style="width:512px;height:152px;">
<!--下行标题栏宽度和高度,标题栏宽度等行总宽度-->
<div id=divkz style="background-image:url(images/bgnlmr.gif);width:512px;line-height:23px;height:23px;overflow:hidden;">
<div id=divkz style="font-size:12px;margin:1px 0 0 5px;"><strong>最新图片展示</strong></div>
<div id=divky style="margin-right:5px;"><a href="http://www.zhousl.com/test.php" style="color:#000000;text-decoration:none;font-size:12px;">>>更多</a></div>
</div>
<div id=divkz style="margin-bottom:4px;width:512px;height:20px;">
<!--下行设置轮换区高度,这里设置的是129px-->
<div class=mds style="padding-right:0px;padding-left:5px;padding-bottom:0px;padding-top:0px;height:129px;overflow:hidden;">
<div class=image_list_box id=image_transform_1>
<ul>
<li><div class=image style="background:url(images/t1.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc1/01gif.gx/7gif000.htm')"></div><div class=text>最新图片1</div></li>
<li><div class=image style="background:url(images/t2.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc2/07jmhtp/jmhtp1.htm')"></div><div class=text>最新图片2</div></li>
<li><div class=image style="background:url(images/t3.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc2/09mh/09mh1.htm')"></div><div class=text>最新图片3</div></li>
<li><div class=image style="background:url(images/t4.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc2/10pp/10pp1.htm')"></div><div class=text>最新图片4</div></li>
</ul>
<ul>
<li><div class=image style="background:url(images/t5.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc2/15mh/mh1.htm')"></div><div class=text>最新图片5</div></li>
<li><div class=image style="background:url(images/t6.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc2/18xj/xj1.htm')"></div><div class=text>最新图片6</div></li>
<li><div class=image style="background:url(images/t7.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc2/21spp/app1.htm')"></div><div class=text>最新图片7</div></li>
<li><div class=image style="background:url(images/t8.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc4/fji1.htm')"></div><div class=text>最新图片8</div></li>
</ul>
<ul>
<li><div class=image style="background:url(images/t9.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc4/fjg1.htm')"></div><div class=text>最新图片9</div></li>
<li><div class=image style="background:url(images/t10.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc7/sr000.htm')"></div><div class=text>最新图片10</div></li>
<li><div class=image style="background:url(images/t11.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc9/jxml1.htm')"></div><div class=text>最新图片11</div></li>
<li><div class=image style="background:url(images/t12.jpg) no-repeat center center" onclick="window.open('http://www.hsq80.com/sc/sc9/mm1.htm ')"></div><div class=text>最新图片12</div></li>
</ul>
<!--

以上的链接都是在新窗口打开的,如果想在当前窗口打开可替换“window.open()为window.location=''
例如第一个图标链接:
新窗口打开为:onclick="window.open('http://www.hsq80.com/sc/sc1/01gif.gx/7gif000.htm')"
当前窗口打开为:onclick="window.location='http://www.hsq80.com/sc/sc1/01gif.gx/7gif000.htm'"
-->
</div>
<script type="text/javascript">
image_transform("image_transform_1");
</script>
</div></div></div>
</div>

以上的链接都是在新窗口打开的,如果想在当前窗口打开可替换“window.open()为window.location=''
例如第一个图标链接:
新窗口打开为:onclick="window.open('http://www.hsq80.com/sc/sc1/01gif.gx/7gif000.htm')"
当前窗口打开为:onclick="window.location='http://www.hsq80.com/sc/sc1/01gif.gx/7gif000.htm'"
-->
</div>
<script type="text/javascript">
image_transform("image_transform_1");
</script>
</div></div></div>
</div>