怎么实现多张图片的循环滚动? 【HTML】如何实现无缝循环的图片滚动效果？
\u5728 dreamweaver\u4e2d\u5982\u4f55\u5b9e\u73b0\u6eda\u52a8\u591a\u5f20\u56fe\u7247legend \u6548\u679c\uff1a
\u7f51\u7ad9\u4e2d\uff0c\u6709\u65f6\u4e3a\u4e86\u66f4\u597d\u7684\u5229\u7528\u6709\u9650\u7684\u9875\u9762\u7a7a\u95f4\u5c55\u793a\u66f4\u591a\u7684\u5185\u5bb9\uff0c\u4e5f\u4e3a\u4e86\u4e30\u5bcc\u7f51\u7ad9\u9875\u9762\u81ea\u8eab\u7684\u8868\u73b0\u6837\u5f0f\uff0c\u6211\u4eec\u5f80\u5f80\u4f1a\u7528\u5230\u56fe\u7247\u6eda\u52a8\u7684\u6548\u679c\u3002\u60f3\u8981\u5b9e\u73b0\u8fd9\u79cd\u6548\u679c\uff0c\u53ea\u9700\u8981\u5728\u60f3\u8981\u663e\u793a\u7684\u8868\u683c\u6216\u7f51\u9875\u4e2d\u52a0\u5165\u4ee5\u4e0b\u4ee3\u7801\u5373\u53ef\u5b9e\u73b0\uff1a//\u8fd9\u4e2a\u56fe\u7247\u7684\u5730\u5740\u53ef\u4ee5\u662f\u76f8\u5bf9\u7684\u4e5f\u53ef\u4ee5\u662f\u7edd\u5bf9\u7684var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft\u4e0b\u9762\uff0c\u6211\u4eec\u5c31\u4e0a\u9762\u4ee3\u7801\u7684\u4e3b\u8981\u90e8\u5206\u8fdb\u884c\u5206\u6790\uff1a \u8fd9\u6bb5\u4ee3\u7801\u4e2d\u4e0b\u5212\u7ebf\u7684\u90e8\u5206\u8868\u793a\u6211\u4eec\u8fd9\u6bb5\u6eda\u52a8\u56fe\u7247\u6240\u5360\u7528\u533a\u57df\u7684\u5927\u5c0f\u3002\u7528\u6237\u53ef\u6839\u636e\u9875\u9762\u7684\u5b9e\u9645\u9700\u8981\u8fdb\u884c\u8c03\u8282\u3002\u4f46\u4e00\u822c\u60c5\u51b5\u4e0b\u81f3\u5c11\u8981\u5927\u4e8e\u6216\u7b49\u4e8e\u56fe\u7247\u7684\u9ad8\u5ea6\u548c\u5bbd\u5ea6\u3002 \u4e0a\u9762\u8fd9\u6bb5\u4ee3\u7801\u662f\u56fe\u7247\u7684\u4ee3\u7801\u3002\u6bcf\u52a0\u5165\u4e00\u884c\u5982\u4e0a\u4ee3\u7801\uff0c\u90a3\u5c31\u4f1a\u591a\u51fa\u4e00\u4e2a\u5c55\u793a\u7684\u56fe\u7247\u3002\u56fe\u7247\u53ef\u4ee5\u662f\u4e00\u4e2a\uff0c\u4e5f\u53ef\u4ee5\u662f\u65e0\u6570\u4e2a\u3002\u9700\u8981\u5f3a\u8c03\u7684\u662f\uff0c\u6bcf\u4e2a\u56fe\u7247\u7684\u9ad8\u5ea6\u548c\u5bbd\u5ea6\u5e94\u5c3d\u91cf\u7684\u7edf\u4e00\u5927\u5c0f\uff0c\u4e3b\u8981\u663e\u793a\u51fa\u6765\u7684\u6548\u679c\u624d\u4f1a\u66f4\u597d\u770b\u3002var speed=30 \u8fd9\u884c\u4ee3\u7801\u662f\u63a7\u5236\u56fe\u7247\u6eda\u52a8\u7684\u901f\u5ea6\u3002\u6570\u5b57\u8d8a\u5c0f\uff0c\u6eda\u52a8\u7684\u4e5f\u5c31\u8d8a\u5feb\uff1b\u76f8\u53cd\uff0c\u6570\u5b57\u8d8a\u5927\uff0c\u6eda\u52a8\u7684\u4e5f\u5c31\u8d8a\u6162\u3002
图片滚动，实际上就是设置的一段时间之后切换下展示的图片。附件为完整的例子。
代码展示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片切换效果</title>
<script src="RevealTrans.js"></script>
</head>
<body>
<style type="text/css">
.container{
width:280px;
height:200px;
border:1px solid #eee;
position:relative;
}
#idPicText{
background:#eee;
line-height:25px;
text-align:center;
font-weight:bold;
width:282px;
white-space:nowrap;
overflow:hidden;
font-size:12px;
}
#idPicText a{
text-decoration:none;
color:#333;
display:block;
}
#idPicList img{
cursor:pointer;
width:65px;
height:50px;
filter:alpha(opacity=50);
-moz-opacity: .5;
opacity: .5;
border:0;
margin:10px;
}
#idPicList img.on{
filter:alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
#idNum{ position:absolute; right:5px; bottom:5px;}
#idNum li{
float: left;
list-style:none;
color: #fff;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
margin: 1px;
border: 1px solid #707070;
background-color: #060a0b;
}
#idNum li.on{
line-height: 18px;
width: 18px;
height: 18px;
font-size: 14px;
border: 0;
background-color: #ce0609;
font-weight: bold;
}
</style>
<div id="idShow" class="container">
</div>
<div id="idPicShow" class="container">
<ul id="idNum">
</ul>
</div>
<div id="idPicText"></div>
<div id="idPicList"></div>
<script>
var r = new RevealTrans("idShow");
//添加变换对象
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
r.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
r.Start();
//////////////////////
var rvt = new RevealTrans("idPicShow");
//添加变换对象
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_2.jpg', '图片滑动展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/13/1194272.html');
rvt.Add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_3.jpg', '图片切换展示效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/07/06/1236770.html');
var oList = $("idPicList"), oText = $("idPicText"), arrImg = [];
var oNum = $("idNum"), arrNum = [];
//设置图片列表
Each(rvt.List, function(list, i){
//图片式
var img = document.createElement("img");
img.src = list["img"]; img.alt = list["text"];
arrImg[i] = img;
oList.appendChild(img);
//按钮式
var li = document.createElement("li");
li.innerHTML = i + 1;
arrNum[i] = li;
oNum.appendChild(li);
//事件设置
img.onmouseover = li.onmouseover = function(){ rvt.Auto = false; rvt.Index = i; rvt.Start(); };
img.onmouseout = li.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
});
//设置图片列表样式 文本显示区域
rvt.onShow = function(){
var i = this.Index, list = this.List[i];
//图片式
Each(arrImg, function(o){ o.className = ""; }); arrImg[i].className = "on";
//按钮式
Each(arrNum, function(o){ o.className = ""; }); arrNum[i].className = "on";
//文本区域
oText.innerHTML = !!list.url ? "<a href='" + list.url + "' target='_blank'>" + list.text + "</a>" : list.text;
}
//文本显示区域
oText.onmouseover = function(){ rvt.Auto = false; rvt.Stop(); };
oText.onmouseout = function(){ rvt.Auto = true; rvt.Start(); };
rvt.Start();
</script>
<br />
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0342339836871729";
/* 728x90, 创建于 10-1-26 */
google_ad_slot = "8648094726";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</body>
</html>
效果图如下：
<div id="demo" style="overflow:hidden;height:33;width:500;background:#214984;color:#000"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif"><img src="http://www.baidu.com/img/logo.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
要做到前后滚动只需要像字幕滚动那样,用marquee代码就可以实现
至于你所说的前后衔接其实是没办法实现的,你所看到的前后衔接效果只是当到达最后一张的时候,马上移回第一张,这样看起来就像一直移下去..
要实现这样只需要加一个JS代码,不过我忘记了,你网上找找...
<marquee
dataformatas=HTML
direction=left
height=136
loop=y
scrollamount=1
scrolldelay=2
width=100%
onMouseOver='this.stop()'
onMouseOut='this.start()'>
<table><tr>
<td><img
src="1.gif"></td>
<td><img
src="1.gif"></td>
<td><img
src="1.gif"></td>
<td><img
src="1.gif"></td>
</tr>
</table>
</marquee>
http://www.makewing.com/search.aspx?keyword=%BC%E4%B6%CF
绛旓細PPT涓缃姩鐢伙細鍥涘紶涓嶅悓鐨鍥剧墖浠庡乏鍚戝彸婊氬姩寰幆鎾斁鐨勫叿浣撴楠ゅ涓嬶細鎴戜滑闇瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏄細鐢佃剳銆丳PT骞荤伅鐗囥1銆侀鍏堟垜浠墦寮闇瑕佺紪杈戠殑PPT骞荤伅鐗囷紝閫変腑鍥剧墖銆2銆佺劧鍚庢垜浠偣鍑绘墦寮鍔ㄧ敾涓殑鈥滃姩鐢荤獥鏍尖濄3銆佺劧鍚庢垜浠偣鍑绘墦寮鈥滄坊鍔犲姩鐢烩濓紝閫夋嫨鈥滈鍏モ濄4銆佷箣鍚庡彸閿崟鍑诲姩鐢荤獥鏍间腑鐨勫姩鐢伙紝閫夋嫨鎵撳紑鈥...
绛旓細婊氬姩寮忎笖鑳芥棤闄寰幆鐨勭収鐗灞曠ず鍦≒PT涓濡備綍瀹炵幇锛閭ｄ箞锛屼粖澶╂垜浠氨涓璧锋潵瀛︿範鍒朵綔鏂规硶鍚э紒棣栧厛锛屾垜浠湅涓涓嬫晥鏋滐細鍏蜂綋鎿嶄綔鏂规硶涓猴細锛1锛夐鍏堬紝鍦≒PT涓彃鍏ラ渶瑕寰幆婊氬姩灞曠ず鐨勭収鐗囷紝鐒跺悗璋冩暣澶у皬鍙婇珮搴﹀悗灏嗙収鐗囧垎涓轰袱缁勶紙娉細涔熷彲浠ヤ娇鐢ㄤ袱缁勭浉鍚岀殑鐓х墖锛夛紝鍐嶆寜Ctrl+G閿紪缁勩傦紙2锛夊皢鍏朵腑涓缁勭収鐗囨斁浜庨〉闈...
绛旓細1.姒傝堪 寰幆婊氬姩鍥剧墖锛屼笉浠呭彲浠ュ娣籛eb椤甸潰鐨勫姩鎬佹晥鏋滐紝鑰屼笖鍙互鑺傜渷椤甸潰绌洪棿锛屾湁鏁堝湴淇濊瘉鍦ㄦ湁闄愮殑椤甸潰涓樉绀烘洿澶氱殑鍥剧墖銆2.鎶鏈鐐 涓昏搴旂敤setTimeout()鏂规硶瀹炵幇鍥剧墖鐨勫惊鐜粴鍔鏁堟灉銆俿etTimeout()鏂规硶鐨勮娉曟牸寮忓涓嬶細setTimeout锛坒unction,milliseconds,[arguments]锛夊弬鏁拌鏄庯細a.function锛氳璋冪敤鐨...
绛旓細xd鍥剧墖婊戝姩鎬庝箞涓鐩寰幆锛氳繖閲岃В閿佷竴涓狝dobe xd鐨勯殣钘忛粦绉戞妧锛屽洜涓鸿繖涓姛鑳藉彲浠ュ揩閫熷湴鍒朵綔婊氬姩鐨勪氦浜掓紨绀哄唴瀹癸紝闈炲父閫傚悎浣跨敤澶氶潰鏉跨殑鐣岄潰锛屽湴鍥惧崱鐗囧拰姘村钩鍥惧儚搴撱傝繖涓姛鑳借彍鍗曞湪鍙充晶鍙樻崲闈㈡澘鐨勪笅鏂癸紝鏈変笁涓夐」锛屾按骞虫粴鍔紝鍨傜洿婊氬姩锛屽拰姘村钩鍨傜洿鏂瑰悜涓鐨勬粴鍔銆
绛旓細鎴戝厛鎶婃垜鐨勬柟娉曡涓璇翠緵浣犲弬鑰冦傛妸浣犺鐢ㄧ殑鍥剧墖鍏堟斁杩涘幓锛屽湪姣忎釜PPT椤甸潰鎻掑叆鍥剧墖鎴栬呯洿鎺ユ柊寤轰竴涓浉鍐岄兘鍙互鈥斺旇彍鍗曞够鐏墖鏀炬槧鈥斺斿够鐏墖鍒囨崲鈥斺旈夋嫨鍚戝乏鎺ㄥ嚭鈥斺旀崲鐗囨柟寮忊斺旀瘡闅1绉掓垨鑰2绉掞紝浣犺嚜宸辩湅鐫鍔烇紝鍒拌繖涓姝ュ彲浠瀹炵幇鍥剧墖妯悜杩炵画鎾斁锛涘够鐏墖鏀炬槧鈥斺旇缃斁鏄犳柟寮忊斺旀斁鏄犻夐」鈥斺寰幆鎾斁锛...
绛旓細鏁堟灉灞曠ず閫氳繃浣跨敤寰幆瀹瑰櫒鐨勬粴鍔鐩戝惉鍜岃缃硷紝鍚屾椂閰嶇疆鍓嶇疆鏉′欢瀹炵幇婊氬姩鍒板叿浣撴煇涓椤癸紝瀹炵幇椤堕儴鍥剧墖婊戝姩鑱斿姩搴曢儴鍥剧墖婊戝姩鏁堟灉銆傚垱寤烘暟鎹〃娉ㄦ剰锛氬湪鏁版嵁涓績浣犲彲浠ュ垱寤哄睘浜庤嚜宸卞簲鐢ㄧ▼搴忕殑鏁版嵁琛ㄦ牸锛屾暟鎹〃鏍肩被鍨嬪垎涓虹敤鎴疯〃銆佸晢鍝佽〃銆佽鍗曡〃鍜岃嚜瀹氫箟琛ㄣ傜偣鍑绘暟鎹腑蹇冦傚垱寤烘暟鎹〃锛氳疆鎾浘銆傚瓧娈靛寘鍚細鍥剧墖銆傜偣鍑绘暟鎹...
绛旓細寮鍙戝伐鍏封濋夐」鍗★紝鐒跺悗娣诲姞婊氬姩鏉℃帶浠跺埌骞荤伅鐗囦腑銆2銆佸皢闀鍥璁剧疆涓烘粴鍔ㄦ潯鎺т欢鐨勮儗鏅垨涓庝箣鍏宠仈鐨勫璞°傝繖鏍凤紝褰撶敤鎴婊氬姩婊氬姩鏉℃椂锛岄暱鍥句細鐩稿簲鍦颁笂涓嬫粦鍔ㄣ3銆佽皟鏁存粴鍔ㄦ潯鎺т欢鐨勫睘鎬э紝濡傛粴鍔ㄨ寖鍥淬佹粴鍔ㄩ熷害绛夛紝浠ラ傚簲闀垮浘銆傝缃姩浣滆矾寰勶紝寰幆灏卞彲浠ヤ簡锛屾粴鍔ㄦ潯鍙彲浠ヤ笂涓嬫粴鍔紝涓嶅彲浠ヤ綔涓烘挱鏀炬搷浣溿
绛旓細鍥剧墖婊氬姩锛屽疄闄呬笂灏辨槸璁剧疆鐨勪竴娈垫椂闂翠箣鍚庡垏鎹笅灞曠ず鐨勫浘鐗囥傞檮浠朵负瀹屾暣鐨勪緥瀛愩備唬鐮佸睍绀猴細<!DOCTYPE html> 鍥剧墖鍒囨崲鏁堟灉 .container{ width:280px;height:200px;border:1px solid #eee;position:relative;} idPicText{ background:#eee;line-height:25px;text-align:center;font-weight:bold...
绛旓細鍏堟妸姣忓紶鍥剧墖鏂板缓涓涓奖鐗囧壀杈戯紝鐒跺悗鍒嗗埆鎷栧叆鑸炲彴锛屾妸浣嶇疆鏀惧ソ鐒跺悗鍒嗗埆鍙栧悕渚嬪锛歩mg1.img2,img3銆傘傘傜劧鍚庢柊寤轰竴灞傚湪绗竴甯ф坊鍔燼s濡備笅锛歰nenterframe=function(){//浠ュ抚棰戠殑閫熺巼鏉ユ墽琛岃繖涓嚱鏁 for(var i=1;i<6;i++){ for寰幆 璁﹊鐨勫奸掑鍒5 鏉瀹炵幇鎺у埗鑸炲彴鐨5涓奖鐗囧壀杈 _root["img"+i...
绛旓細PPT涓椤垫枃瀛楁垨寰堝寮犲浘鐗瀛楀箷婊氬姩鏁堟灉鍒朵綔 鍦≒PT2007涓缃竴缁勨滃瓧骞曞紡鈥濆姩鐢伙紝璁剧疆濂芥椂闂村欢杩熷氨鑳戒娇鎵鏈夊浘鐗囪繛缁笂鍗囩洿鑷冲浘鐗囧睍绀哄畬锛堝浘鐗囧皯鐨勮瘽涓ょ粍鍙互璁剧疆寰幆锛夈傛柟娉曪細1銆佹妸鍥剧墖鎸夐『搴忎竴缁勪竴缁勪笂涓嬫帓鍒楀ソ锛屽乏鍙冲眳涓紝缁勫悎涓璧凤紝鐒跺悗璋冩暣涓婁笅闀垮害鍜孭PT椤甸潰涓婁笅绛夐暱銆2銆佹寜鍥剧墖椤哄簭渚濇閲嶅悎鍙犳斁锛...
