110,539
社区成员
发帖
与我相关
我的任务
分享html静态网页中如何制作一个图片滚动的代码，急！
我想在静态的html页面中实现官网上有4张图片右下角有小标签，放上去自动切图的形式；且过个5秒自动换图的。用Dreamweaver做，不知可行否？？？不带后台的.cs代码，纯网页制作。
我在别的网站源代码里截取的代码；代码如下：
<script type="text/javascript">
var files="../Zouecp/PicFiles/2012.11.16_11.27.27_3337.jpg|../Zouecp/PicFiles/2012.11.13_19.29.44_8317.jpg|../Zouecp/PicFiles/2012.11.13_21.38.25_1909.jpg|../Zouecp/PicFiles/2012.11.13_22.2.15_2123.jpg";//链接不是类似E:\web\web\tongrun\image的么，怎么/会向左边啊？
var links="#|#|#|#";
var texts="#|#|#|#";
var TitleBgColor="0xFFFFFF" //TitleBgColor 图片名称文字背景颜色 0xFF6600
var TitleBgAlpha="100" //TitleBgAlpha 图片名称文字背景颜色透明度：0-100值，0表示全部透明 60
var TitleBgPosition="1000" //TitleBgPosition 图片名称文字位置，0表示文字在顶端，1表示文字在底部，2表示文字在顶端浮动 100
var BtnDefaultColor="0xFF6600" //BtnDefaultColor 按键默认的颜色 0xFF6600
var BtnOverColor="0x000033" //BtnOverColor 按键当前的颜色 0x000033
var AutoPlayTime="4" //AutoPlayTime 自动播放时间：单位是秒 3
var Tween="3" //Tween 图片过渡效果：0，表示亮度过渡，1表示透明度过渡，2表示模糊过渡，3表示运动模糊过渡 2
var IsShowBtn="1" //IsShowBtn 是否显示按钮：1表示显示按键，0表示隐藏按键，更适合做广告挑轮换 1
var WinOpen="_blank" //WinOpen 打开窗口：_blank表示新窗口打开。_self表示在当前窗口打开 _blank
var FlashVarst= "bcastr_file="+files+"&bcastr_title="+texts+"&TitleBgColor="+TitleBgColor+"&TitleBgAlpha="+TitleBgAlpha+"&TitleBgPosition="+TitleBgPosition+"&BtnDefaultColor="+BtnDefaultColor+"&BtnOverColor="+BtnOverColor+"&AutoPlayTime="+AutoPlayTime+"&Tween="+Tween+"&IsShowBtn="+IsShowBtn+"&WinOpen="+WinOpen
var FocusFlash = new focusFlash("images/flashpic.swf","focusflash","100%","233","7","#ffffff",false,"High");
FocusFlash.addParam("allowScriptAccess", "sameDomain");
FocusFlash.addParam("menu", "false");
FocusFlash.addParam("wmode", "opaque");
FocusFlash.addParam("FlashVars", FlashVarst );
FocusFlash.write("focusViwer");
</script>
如果可行的话代码能改得简单点不？只2张图片来回滚就好，求做个示范啊！！！！
我在别的网站源代码里截取的代码；代码如下：
<script type="text/javascript">
var files="../Zouecp/PicFiles/2012.11.16_11.27.27_3337.jpg|../Zouecp/PicFiles/2012.11.13_19.29.44_8317.jpg|../Zouecp/PicFiles/2012.11.13_21.38.25_1909.jpg|../Zouecp/PicFiles/2012.11.13_22.2.15_2123.jpg";//链接不是类似E:\web\web\tongrun\image的么，怎么/会向左边啊？
var links="#|#|#|#";
var texts="#|#|#|#";
var TitleBgColor="0xFFFFFF" //TitleBgColor 图片名称文字背景颜色 0xFF6600
var TitleBgAlpha="100" //TitleBgAlpha 图片名称文字背景颜色透明度：0-100值，0表示全部透明 60
var TitleBgPosition="1000" //TitleBgPosition 图片名称文字位置，0表示文字在顶端，1表示文字在底部，2表示文字在顶端浮动 100
var BtnDefaultColor="0xFF6600" //BtnDefaultColor 按键默认的颜色 0xFF6600
var BtnOverColor="0x000033" //BtnOverColor 按键当前的颜色 0x000033
var AutoPlayTime="4" //AutoPlayTime 自动播放时间：单位是秒 3
var Tween="3" //Tween 图片过渡效果：0，表示亮度过渡，1表示透明度过渡，2表示模糊过渡，3表示运动模糊过渡 2
var IsShowBtn="1" //IsShowBtn 是否显示按钮：1表示显示按键，0表示隐藏按键，更适合做广告挑轮换 1
var WinOpen="_blank" //WinOpen 打开窗口：_blank表示新窗口打开。_self表示在当前窗口打开 _blank
var FlashVarst= "bcastr_file="+files+"&bcastr_title="+texts+"&TitleBgColor="+TitleBgColor+"&TitleBgAlpha="+TitleBgAlpha+"&TitleBgPosition="+TitleBgPosition+"&BtnDefaultColor="+BtnDefaultColor+"&BtnOverColor="+BtnOverColor+"&AutoPlayTime="+AutoPlayTime+"&Tween="+Tween+"&IsShowBtn="+IsShowBtn+"&WinOpen="+WinOpen
var FocusFlash = new focusFlash("images/flashpic.swf","focusflash","100%","233","7","#ffffff",false,"High");
FocusFlash.addParam("allowScriptAccess", "sameDomain");
FocusFlash.addParam("menu", "false");
FocusFlash.addParam("wmode", "opaque");
FocusFlash.addParam("FlashVars", FlashVarst );
FocusFlash.write("focusViwer");
</script>
如果可行的话代码能改得简单点不？只2张图片来回滚就好，求做个示范啊！！！！
...全文
请发表友善的回复…
发表回复
heshengyuboy 2013-03-20
- 打赏
- 举报
点击图片跳出图片是可能是浏览器的问题。。主要还是看你的代码。。有可能是你的代码里面写了这个点击事件。
野鼻孔 2013-03-20
- 打赏
- 举报
下面会有个链接。。还有点击图片会跳出图片。。这2个怎么取消掉啊
heshengyuboy 2013-03-20
- 打赏
- 举报
取消下面的链接是取消浏览器的状态栏显示吗。。那个不太好弄。。自动跳出图片如果是放大的话做个div用js控制一下就好了
野鼻孔 2013-03-20
- 打赏
- 举报
可以实现了，不过我如果想取消下面的可见的 x.jpg链接，还有点击图片自动就跳出图片。这个该要到js里改么？
heshengyuboy 2013-03-20
- 打赏
- 举报
实用jquery可以很轻松的实现。。代码如下。。
<html>
<head>
<style>
div{
cursor: pointer;
font-size:10pt;
}
.pb{
width:300px;/*单个图片的宽（和显示区域相同）*/
height:300px;/*单个图片的高（和显示区域相同）*/
}
#plist{
position:relative;
top:-29px;
}
#pshow{
width:300px;/*显示区域的宽度*/
height:300px;/*显示区域的高度*/
overflow: hidden;
position:absolute;
top:20px;
left:20px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
var i=1;
function pchange(obj){
var imgtop=((0-(obj-1))*300-29)+"px";
$("#plist").animate({
top:imgtop
},"slow");
i=obj++;
if(i>4){
i=1;
}
}
function timechange(){
pchange(i);
i++;
if(i>4){
i=1;
}
setTimeout('timechange()',3000);
}
</script>
</head>
<body onload="timechange()">
<div id="pshow">
<div style="display:table;position:relative;left:150px;top:260px;z-index:99;">
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(1)">1</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(2)">2</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(3)">3</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(4)">4</div>
</div>
<div id="plist">
<div class="pb" style="background:green;">
</div>
<div class="pb" style="background:red;">
</div>
<div class="pb" style="background:blue;">
</div>
<div class="pb" style="background:yellow;">
</div>
</div>
</div>
</body>
</html>
md5e 2013-03-20
- 打赏
- 举报
_小黑_ 2013-03-20
- 打赏
- 举报
<!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>
<link href="css/scrollTop.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--循环向上滚动的文字开始-->
<div class="domes">
<div class="dome_top">近7日畅销榜</div>
<div id="dome">
<div id="dome1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/scrollTop_1.jpg" alt="scroll" /></td>
<td><div class="title">社交疯狂项语</div>
<font class="price">￥57.00</font> 折扣：52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_2.jpg" alt="scroll" /> </td>
<td><div class="title">傲慢与偏见</div>
<font class="price">￥20.00</font> 折扣：25折</td>
</tr>
<tr>
<td><img src="images/scrollTop_3.jpg" alt="scroll" /></td>
<td><div class="title">玻璃鞋全集（50集34VCD）</div>
主演：金贤珠 金芝荷
<font class="price">￥300.00</font> 折扣：52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_4.jpg" alt="scroll" /></td>
<td><div class="title">澳大利亚：假日之旅</div>
<font class="price">￥53.00</font> 折扣：51折</td>
</tr>
<tr>
<td><img src="images/scrollTop_5.jpg" alt="scroll" /> </td>
<td><div class="title">浪漫地中海：假日之旅</div>
<font class="price">¥80.00</font> 折扣：52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_6.jpg" alt="scroll" /></td>
<td><div class="title">老人与海</div>
<font class="price">¥57.00</font> 折扣：52折</td>
</tr>
<tr>
<td><img src="images/scrollTop_7.jpg" alt="scroll" /></td>
<td><div class="title">欧陆风情：假日之旅</div>
<font class="price">¥53.00</font> 折扣：52折</td>
</tr>
</table>
</div>
<div id="dome2"></div>
</div>
</div>
<script src="js/scrollTop.js" type="text/javascript"></script>
<!--循环向上滚动的文字结束-->
<!--循环向上滚动的文字的实现思路-->
<div class="main">
一、循环向上滚动的文字，如上面的滚动效果<br />
二、实现的思路 <br />
<div class="left_indent">1、建立三个层dome、dome1、dome2 <br /> 2、垂直滚动的文字在dome1上 <br /> 3、通过层的滚动来实现文字滚动
</div>
三、源代码 <br />
<div class="left_indent"><html><br />
<head><br />
<title>循环向上滚动的文字</title><br />
<font class="red"><link href="css/scrollTop.css" rel="stylesheet" type="text/css" /><br /></font>
</head><br />
<body><br />
<div class="domes"><br />
<div class="dome_top">近7日畅销榜</div><br />
<font class="red"><div id="dome"><br />
<div id="dome1"><br /></font>
<table width="100%" border="0" cellspacing="0" cellpadding="0"><br />
<tr><br />
<td><img src="images/scrollTop_1.jpg" alt="scroll" /></td><br />
<td><div class="title">社交疯狂项语</div><br />
<font class="price">￥57.00</font> 折扣：52折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_2.jpg" alt="scroll" /> </td><br />
<td><div class="title">傲慢与偏见</div><br />
<font class="price">￥20.00</font> 折扣：25折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_3.jpg" alt="scroll" /></td><br />
<td><div class="title">玻璃鞋全集（50集34VCD）</div><br />
主演：金贤珠 金芝荷<br />
<font class="price">￥300.00</font> 折扣：52折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_4.jpg" alt="scroll" /></td><br />
<td><div class="title">澳大利亚：假日之旅</div><br />
<font class="price">￥53.00</font> 折扣：51折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_5.jpg" alt="scroll" /> </td><br />
<td><div class="title">浪漫地中海：假日之旅</div><br />
<font class="price">¥80.00</font> 折扣：52折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_6.jpg" alt="scroll" /></td><br />
<td><div class="title">老人与海</div><br />
<font class="price">¥57.00</font> 折扣：52折</td><br />
</tr><br />
<tr><br />
<td><img src="images/scrollTop_7.jpg" alt="scroll" /></td><br />
<td><div class="title">欧陆风情：假日之旅</div><br />
<font class="price">¥53.00</font> 折扣：52折</td><br />
</tr><br />
</table><br />
</div><br />
<font class="red"><div id="dome2"></div><br /></font>
</div><br />
</div><br />
<font class="red"><script src="js/scrollTop.js" type="text/javascript"></script><br /></font>
</body><br />
</html></div>
四、设置id为dome的层的div源代码
<div class="left_indent">#dome{<br />
overflow:hidden; /*溢出的部分不显示*/<br />
height:180px;<br />
padding:5px;<br />
}</div>
五、实现循环向上滚动的JavaScript代码
<div class="left_indent"> function $(element){<br />
return document.getElementById(element);<br />
}<br />
var dome=$("dome");<br />
var dome1=$("dome1");<br />
var dome2=$("dome2");<br />
var speed=50; //设置向上滚动速度<br />
dome2.innerHTML=dome1.innerHTML //复制dome1为dome2<br />
function moveTop(){<br />
<font class="red">if(dome2.offsetTop-dome.scrollTop<=0)</font> //当滚动至dome1与dome2交界时<br />
<font class="red">dome.scrollTop-=dome1.offsetHeight</font> //dome跳到最顶端<br />
else{<br />
<font class="red">dome.scrollTop++</font><br />
}<br />
}<br />
<font class="red">var MyMar=setInterval(moveTop,speed)</font> //设置定时器<br />
<font class="red">dome.onmouseover=function() {clearInterval(MyMar)} </font> //鼠标移上时清除定时器达到滚动停止的目的<br />
<font class="red">dome.onmouseout=function() {MyMar=setInterval(moveTop,speed)}</font> //鼠标移开时重设定时器，继续滚动
<br /><br />
</div>
</div>
</body>
</html>
md5e 2013-03-20
- 打赏
- 举报
js还没有引入?
_小黑_ 2013-03-20
- 打赏
- 举报
<!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">
<!--
#Layer1 {
position:absolute;
width:421px;
height:275px;
z-index:1;
}
#Layer2 {
position:absolute;
width:21px;
height:18px;
z-index:1;
left: 154px;
top: 18px;
visibility: visible;
}
#Layer3 {
position:absolute;
width:21;
height:18;
z-index:2;
left: 192px;
top: 18px;
visibility: visible;
}
#Layer4 {
position:absolute;
width:21;
height:18;
z-index:3;
left: 228px;
top: 18px;
visibility: visible;
}
#Layer5 {
position:absolute;
width:21;
height:18;
z-index:4;
left: 268px;
top: 18px;
visibility: visible;
}
-->
a{ text-align:center; text-decoration:none; text-align:center}
#Layer6 {
position:absolute;
width:94px;
height:65px;
z-index:5;
left: 121px;
top: 301px;
}
#Layer7 {
position:absolute;
width:90px;
height:63px;
z-index:6;
left: 15px;
top: 301px;
}
#Layer8 {
position:absolute;
width:94px;
height:62px;
z-index:7;
left: 236px;
top: 302px;
}
#Layer9 {
position:absolute;
width:97px;
height:60;
z-index:8;
left: 339px;
top: 300px;
}
#Layer10 {
position:absolute;
width:103px;
height:33px;
z-index:9;
left: 7px;
top: 195px;
}
#Layer11 {
position:absolute;
width:450px;
height:81px;
z-index:9;
left: 1px;
top: 216px;
background-color: #666666;
visibility: hidden;
}
#div1 {
height: 600px;
width: 260px;
padding: 20px;
background-repeat: repeat;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale
}
</style>
<script language="JavaScript" type="text/javascript">
function show(ss){
switch(ss){
case 'a':
var imagea=document.getElementById("img");
imagea.setAttribute("src","img/01.jpg");
break;
case 'b':
var imageb=document.getElementById("img");
imageb.setAttribute("src","img/02.jpg");
break;
case 'c':
var imagec=document.getElementById("img");
imagec.setAttribute("src","img/03.jpg");
break;
case 'd':
var imaged=document.getElementById("img");
imaged.setAttribute("src","img/04.jpg");
break;
}
}
</script>
</head>
<body>
<div id="Layer1">
<img src="img/01.jpg" id="img">
<div id="Layer7"><img src="img/btn_01.jpg" width="97" height="64" id="imga" onmouseover="show('a')"/></div>
<div id="Layer6"><img src="img/btn_02.jpg" width="97" height="64" id="imgb" onmouseover="show('b')"/></div>
<div id="Layer8"><img src="img/btn_03.jpg" width="97" height="64" id="imgc" onmouseover="show('c')"/></div>
<div id="Layer9"><img src="img/btn_04.jpg" width="97" height="64" id="imgd" onmouseover="show('d')"/></div>
<div id="Layer2" align="center"><a href="javascript:show('a')">1</a></div>
<div id="Layer3" align="center"><a href="javascript:show('b')">2</a></div>
<div id="Layer4" align="center"><a href="javascript:show('c')">3</a></div>
<div id="Layer5" align="center"><a href="javascript:show('d')">4</a></div>
</div>
</body>
</html>
md5e 2013-03-20
- 打赏
- 举报
看看引用的路径都对没?
野鼻孔 2013-03-20
- 打赏
- 举报
哦。有了，还有个问题。。下载了个focusflash.js.为什么还那个focus.swf,刚才.swf没放进去。。。
md5e 2013-03-20
- 打赏
- 举报
其实focus.swf的实现是最简单的
1\先下载focus.swf这个文件
2\配置focus.swf参数
我等下做个简单的实例给你
野鼻孔 2013-03-20
- 打赏
- 举报
大神你不能详细点讲一下吗？都100分了。。你1.2句话能指明我也不问了，百度一下就出来了，就是代码不清楚。。
md5e 2013-03-20
- 打赏
- 举报
懒人图库里不是有详细案便吗?都可以直接下载的
野鼻孔 2013-03-20
- 打赏
- 举报
我写上src="focusflash.js"连图片都不显示了
野鼻孔 2013-03-20
- 打赏
- 举报
我把这段代码加进去为什么图片都没显示啊，
求大神
<script type="text/javascript" src="jquery.js">
<!--
var focus_width = 996; // 图片宽度
var focus_height= 400; // 图片高度
var text_height = 20; // 显示的文字高度
var swf_height = focus_height + text_height;
var pics ="image/21.jpg|image/21.jpg";
var links="image/21.jpg|image/21.jpg";
var texts="image/21.jpg|image/21.jpg";
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ');
document.write('codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ');
document.write('width="'+ focus_width +'" ');
document.write('height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain">');
document.write('<param name="movie" value="focus.swf">');
document.write('<param name="quality" value="high">');
document.write('<param name="bgcolor" value="#ffffff">');
document.write('<param name="menu" value="false">');
document.write('<param name=wmode value="opaque">');
document.write('<param name="FlashVars" ');
document.write('value="pics='+pics);
document.write( '&links='+links);
document.write( '&texts='+texts);
document.write( '&borderwidth='+focus_width);
document.write( '&borderheight='+focus_height);
document.write( '&textheight='+text_height+'">');
document.write('<embed src="focus.swf" ');
document.write('wmode="opaque" ');
document.write('FlashVars="pics='+pics);
document.write( '&links='+links);
document.write( '&texts='+texts);
document.write( '&borderwidth='+focus_width);
document.write( '&borderheight='+focus_height);
document.write( '&textheight='+text_height+'" ');
document.write('menu="false" ');
document.write('bgcolor="#ffffff" ');
document.write('quality="high" ');
document.write('width="'+ focus_width +'" ');
document.write('height="'+ focus_height +'" ');
document.write('allowScriptAccess="sameDomain" ');
document.write('type="application/x-shockwave-flash" ');
document.write('pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');
//-->
</script>
野鼻孔 2013-03-20
- 打赏
- 举报
jquery是怎么用的？
我先要下载一个jquery再在<script type="text/javascript" 这里src="jquery.js"？对否？>
IT0329 2013-03-19
- 打赏
- 举报
跑马灯不就能滚动了？
野鼻孔 2013-03-19
- 打赏
- 举报
求大神学习学习，很想学习这个图片滚动的制作方法
