求html代码，5张图片由下至上不连续移动代码，图片像素160x160，图片之间有10像素空隙。 HTML里如何移动图片位置
\u5173\u4e8eHTML\u4ee3\u7801\u7684\uff0c\u56fe\u7247\u4e4b\u95f4\u6709\u7a7a\u9699\uff0c\u8bf7\u54ea\u4f4d\u5927\u4fa0\u5e2e\u5fd9\u89e3\u51b3\u4e0b\uff0c\u975e\u5e38\u611f\u8c22\uff01\uff01\u6bcf\u4e2a\u56fe\u7247\u52a0\u6bb5\u6837\u5f0f\u4ee3\u7801\u8bd5\u8bd5
1\u3001\u9996\u5148\uff0c\u60a8\u9700\u8981\u521b\u5efa\u4e00\u4e2ahtml\u3002
2\u3001\u540c\u65f6\uff0c\u60a8\u9700\u8981\u521b\u5efa\u4e00\u4e2aCSS\u6587\u6863\u3002
3\u3001CSS\u6587\u6863\u7684\u540e\u7f00\u540d\u5fc5\u987b\u4e3aCSS\uff0c\u6bd4\u5982\u6211\u4eec\u521b\u5efa\u4e00\u4e2aindex.css\u6587\u6863\u3002\u8fd9\u4e00\u70b9\u5f88\u91cd\u8981\u3002
4\u3001\u5f15\u5165CSS\u6587\u6863\u3002HTML\u91cc\u5c31\u53ef\u4ee5\u79fb\u52a8\u56fe\u7247\u4f4d\u7f6e\uff0c\u65b9\u6cd5\u5f88\u7b80\u5355\u3002
\u3002
<!-- Begin
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->
</script>
<center>
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="white">
<b>图片循环</b>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="photo/cart.gif" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="photo/cart.gif" selected>车子
<option value="photo/aat.gif">防空坦克
<option value="photo/boat.gif">汽艇
<option value="photo/enterprise.gif">Enterprise
<option value="photo/ewing.gif">E-Wing
<option value="photo/f18.gif">F-18
<option value="photo/klingon.gif">Klingon
<option value="photo/landingcraft.gif">太空飞船
<option value="photo/hoverracer.gif">Hover Racer
<option value="photo/sith.gif">Sith
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
</center>
不是5张图片的，但是大概意思就是这样，你看看吧！
绛旓細<SCRIPT LANGUAGE="JavaScript"> <!-- Begin var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)current = 0;function next() { if (document.slideform.slide[current+1]) { document.images.show.src = document.slideform.slide[current+1].value;document.slideform.slide...
绛旓細scrollLeft
绛旓細浠ｇ爜濡備笅:1銆<img src="divcss5-logo-201305.gif" width="165" height="60" /> img浠嬬粛锛歴rc 鍚庤窡鐨勬槸鍥剧墖璺緞鍦板潃 width 璁剧疆鍥剧墖瀹藉害 height 璁剧疆鍥剧墖楂樺害 2銆佹垜浠湪html婧愪唬鐮佷腑鍒嗗埆鎻掑叆涓夊紶鍥剧墖锛屼竴寮犲師濮嬪ぇ銆佷竴寮犲皢瀹藉害楂樺害鏀瑰皬灏忋佷竴寮犲皢瀹藉害楂樺害鏀瑰ぇ銆3銆佹晥鏋滃浘锛...
绛旓細html鐨勫浘鐗鐨勫悇绉嶈矾寰浠ｇ爜 鐗╃悊璺緞锛氬亣濡備綘鐨勫浘鐗囧湪D鐩樼殑images鏂囦欢涓嬶紝鏂囦欢鍚嶇О涓 tupian.jpeg鐨勮瘽鐢ㄤ笅闈㈢殑鏍煎紡銆<img src="file:///D|/images/tupian.jpeg"/> 鐩稿璺緞锛氬鏋滄槸缃戠珯鐨勮瘽锛屽垯涓轰笅闈㈢殑锛<img src="images/tupian.jpeg"/> 杩欎釜涓篽tml鏂囦欢鍜宨mages鍚屼竴鐩綍鐨勫啓娉曪細<img src="tu...
绛旓細1) scrollAmount銆傚畠琛ㄧず閫熷害锛屽艰秺澶ч熷害瓒婂揩銆2) 鍔犲叆onmouseover=stop() onmouseout=start()浠ｇ爜锛榧犳爣鎸囧悜寰幆鏂囧瓧鍥剧墖鏃朵粬浠細鍋滄婊氬姩锛岄紶鏍囩寮鏃剁户缁粴鍔ㄣ傜粰婊氬姩鍥剧墖鍔犺秴閾炬帴 鐢<a href=>鍜</a>鎶<img>鍖呭洿锛屽苟涓攊mg蹇呴』璁綽order=0锛屽惁鍒欏浘鐗囦細鍑虹幇杈规銆備緥瀛愬涓嬶細<MARQUEE scrollAmount=...
绛旓細姝ラ锛氫竴銆html鍥剧墖鏍囩璇硶 <img src="divcss-logo-201305.gif" width="165" height="60" /> img浠嬬粛锛歴rc 鍚庤窡鐨勬槸鍥剧墖璺緞鍦板潃width 璁剧疆鍥剧墖瀹藉害height 璁剧疆鍥剧墖楂樺害 浜屻佸叿浣揾tml 鍥剧墖鏄剧ず瀹炰緥 鍦html婧愪唬鐮涓垎鍒彃鍏ヤ笁寮犲浘鐗囷紝涓寮犲師濮嬪ぇ銆佷竴寮犲皢瀹藉害楂樺害鏀瑰皬灏忋佷竴寮犲皢瀹藉害楂樺害鏀瑰ぇ銆1銆...
绛旓細<html> <head> <title>绗竴涓猦tml缃戦〉</title> <metacharset="utf-8"> </head> <body> </body> </html> <html> <head> <title>绗竴涓猦tml缃戦〉</title> <metacharset="utf-8"> </head> <body> <table> <tr> <td>绗竴琛岀涓鍒</td> <td>绗竴琛岀浜屽垪</td> </tr> <tr>...
绛旓細1銆侀鍏堬紝鍦ㄨ绠楁満妗岄潰涓婂垱寤轰竴涓柊鏂囦欢澶癸紝鐒跺悗鍦ㄨ鏂囦欢澶逛腑鍒涘缓涓涓柊鐨勬枃鏈枃妗ｃ2銆佺劧鍚庡弻鍑绘墦寮甯︽湁璁颁簨鏈殑鏂囨湰鏂囨。锛屽涓嬪浘鎵绀猴紝鎴戜滑缂栧啓涓涓畝鍗曠殑html浠ｇ爜銆3銆佸崟鍑烩滃彟瀛樹负鈥濈殑鍔熻兘閫夐」锛屾樉绀洪粯璁や繚瀛樹负缂栫爜涓篈NSI銆4銆佹垜浠皢鏇存敼缂栫爜鍜屾枃浠跺悕锛屽皢鍏舵洿鏀逛负濡傚浘鎵绀虹殑鍥惧儚骞朵繚瀛樸5銆佺劧鍚庤繑鍥...
绛旓細1銆佸浘涓洪粦鑹层佺孩鑹插拰绱壊鐨HTML棰滆壊浠ｇ爜琛細2銆佸浘涓虹ⅶ鑹层佽摑鑹层佺豢鑹睭TML棰滆壊浠ｇ爜琛細3銆佸浘涓虹豢鑹层侀粍鑹层佹鑹睭TML棰滆壊浠ｇ爜琛細4銆佸浘涓烘繁绾㈣壊銆佹鑹层佹繁绱壊HTML棰滆壊浠ｇ爜琛細瓒呮枃鏈爣璁拌瑷锛屾爣鍑嗛氱敤鏍囪璇█涓嬬殑涓涓簲鐢ㄣ傗滆秴鏂囨湰鈥濆氨鏄寚椤甸潰鍐呭彲浠ュ寘鍚鍥剧墖銆侀摼鎺ワ紝鐢氳嚦闊充箰銆佺▼搴忕瓑闈炴枃瀛楀厓绱犮傝秴...
绛旓細浠ヤ笅鏄垜鐢html鐨鐩稿叧鐭ヨ瘑鍒朵綔鐨勪釜浜虹畝鍘嗙綉椤,璇濅笉澶氳鍏堢湅鐪嬫渶缁堟晥鏋:濡備笂鎵绀洪」鐩竴鍏卞垎涓5涓儴鍒,鍒嗗埆瀵瑰簲瀵艰埅鏍忕殑5涓唴瀹广傚叾涓」鐩妧鑳界敤鐨勬槸echarts閲岀殑鏌辩姸鍥,浣滃搧灞曠ず鐢ㄧ殑鏄痓ootstrap閲岀殑杞挱鍥,闄ゆ涔嬪灏辨槸html鐨勫熀纭鍐呭銆備笅闈㈡垜浠睍绀轰竴涓嬮」鐩殑浠ｇ爜閮ㄥ垎: <!DOCTYPE html><html><head><meta charset...
