網頁設計自動放映圖片的代碼_html圖片自動播放代碼

1、網頁製作中插入圖片的代碼是什麼

1、在代碼中經常用到的插入圖片代碼是img屬性，格式就是<img src="" alt=""> src後面是添加圖片的地址，後面的alt是對圖片的描述。

2、在插入圖片前，要將html文件和圖片文件放在一個文件夾內，這里的img文件夾就是專門存放圖片的地方。

3、然後回到代碼欄，在src中輸入鏈接地址img/pic_01.jpg，要將圖片的具體地址和名稱全部寫全才可以在網頁中看到，否則就會顯示連接失敗錯誤而無法觀看到圖片。

4、將文件保存後，在瀏覽器中我么就可以看到此刻的圖片被添加進來了，位於網頁的左上角位置。

5、如果想要移動圖片的所在位置，就需要先對其包裝一下，用一個盒子將其包裹，然後調整盒子的位置就相當於移動的是圖片的位置了。

6、如圖，之前設置的盒子距離頂部100px.然後距離左側100px，這樣就將盒子擠到了現在所在的位置，如圖所示。

2、網頁設計圖片輪顯的代碼

網頁設計圖片輪顯的代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<SCRIPT src="js/article.js"></SCRIPT>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="312" border="0" align="center" cellpadding="0" cellspacing="0" class="solidbox">
<tr>
<td width="312" height="312" align="center"><TABLE border=0 align="center" cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD><DIV id=oTransContainer
style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 220px; HEIGHT: 194px"><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV1
style="DISPLAY: yes;"
height=300 src="images/01.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV2
style="DISPLAY: none;"
height=300 src="images/02.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV3
style="DISPLAY: none;"
height=300 src="images/03.jpg"
width=300 border=0></A><A
href="http://www.makewing.com/lanren/"
target=_blank><IMG id=oDIV4
style="DISPLAY: none;"
height=300 src="images/04.jpg"
width=300 border=0></A></DIV>
</TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td height="22" align="right" valign="top"><script>var MaxImg = 4; fnToggle();</script>
<TABLE cellSpacing=1 cellPadding=0 width=110
border=0>
<TBODY>
<TR>
<TD width=26><A href="javascript:toggleTo(1)"><IMG height=15
src="images/s_1.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(2)"><IMG height=15
src="images/s_2.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(3)"><IMG height=15
src="images/s_3.gif" width=17
border=0></A></TD>
<TD width=27><A href="javascript:toggleTo(4)"><IMG height=15
src="images/s_4.gif" width=17
border=0></A></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
</table>
</body>
</html>
CSS的代碼為：
td {font-size: 12px;}
.solidbox {
BORDER-TOP: #D7D7D7 1px solid;
BORDER-RIGHT: #D7D7D7 1px solid;
BORDER-BOTTOM: #D7D7D7 1px solid;
BORDER-LEFT: #D7D7D7 1px solid;
}

3、網頁設計圖片滾動代碼

素材的准備。為了更好的表現網站的風格和特色，具備一些更富表現力和吸引力的圖片是必不可少的。同理，准備了一些與網頁主題密切相關的圖片，用於做為實現圖片滾動效果的素材。

打開Dreamweaver8，新建一網頁文件，並保存為名為「index.html"文件。

切換至代碼編輯界面，輸入如下代碼：

對應效果如圖所示：

新建一CSS樣式表文件，並將該文件保存到與「index.html」相同的目錄下，文件名稱為「MyStyle.css"。

在新建的樣式表文件"MyStyle.css」文件中輸入如下代碼：
* { padding:0; margin:0;} /*設置所有對像的內邊距為0*/
body { text-align:center;} /*設置頁面居中對齊*/
#photo-list {
/* 6張圖片的寬度（包含寬度、padding、border、圖片間的留白）
計算：6*(100+2*2+1*2+9) - 9
之所以減去9是第6張圖片的右邊留白 */
width:681px;

/* 圖片的寬度（包含高度、padding、border）
計算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份將被隱藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}

#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}

對應文件內容如圖所示：

在網頁文件"index.html"中添加對該樣式表的引用：

此時網頁效果如圖所示：

新建一個JS文件，並將該文件另存為「MoveEffect.js"。

在」MoveEffect.js「文件中輸入如下所示代碼：
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //獲得每個img容器的寬度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //當 c.scrollLeft 和 width 相等時，把第一個img追加到最後面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //數值越大越慢
ul.style.width = width*itemCount + 'px'; //載入完後設置容器長度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};

然後在主頁文件"index.html」中添加對該「MoveEffect.js」文件的引用。

代碼如圖所示：

打開「index.html」網頁文件，最終效果如果所示：

4、html 圖片自動播放代碼

你先試試這個代碼（先用背景顏色來代碼替）：
<html>
<head>
</head>

<body>
<div id="div1" style="width:100px; height:100px; background:red;">

</div>
<script>
var adiv=document.getElementById('div1');
var colors=['green','black','pink','blue','yellow','gray','red'];
var i=0;
setInterval(function()
{
if(i==colors.length)
{
i=0;
}
adiv.style.backgroundColor=colors[i];
i++;
},1000)
</script>
</body>
</html>
看能不能幫上什麼。

5、網頁中怎麼實現圖片的自動切換？求代碼。。

網頁圖片自動切換js代碼
<script language =javascript >
var curIndex=0;
//時間間隔(單位毫秒)，每秒鍾顯示一張，數組共有5張圖片放在Photos文件夾下。
var timeInterval=1000;
var arr=new Array();
arr[0]="photos/1.jpg";
arr[1]="photos/2.jpg";
arr[2]="photos/3.jpg";
arr[3]="photos/4.jpg";
arr[4]="photos/5.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
<img id=obj src ="photos/1.jpg" width=200 height=150 border =0>
可以自己配置，自己設置每張圖片切換的時間間隔，自己設置每張圖片的路徑（絕對、相對路徑都可以）雖然很簡單，但是很實用。

6、網頁圖片自動播放

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type='text/css' rel='stylesheet' href='http://www.css88.com/demo/Animate Image/style3.css' />
<script type="text/javascript" src="http://www.css88.com/demo/Animate Image/sliderIMG3.js"></script>
<title>Slider view Images</title>
<script>
window.onload = function(){
sliderIMG.create('imageFlow',{count:8, speed:5, auto:true,timer:5000});
}
</script>
</head>
<body>
<div id='imageFlow'>
<div class='top'></div>
<div class='bank'>
<ul class='imageList'>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/0.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/1.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/2.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/3.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/4.jpg' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/5.JPG' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/6.JPG' /></a></li>
<li><a href='#'><img src='http://www.css88.com/demo/Animate Image/images/7.JPG' /></a></li>
</ul>
</div>
<div class='mainOpacity'></div>
<div class='leftOpacity'></div>
<div class='rightOpacity'></div>
<div class='scrollbar'>
<span class='currentScroll'></span>
</div>
</div>
<div id='content'>
<h3>使用方法：</h3>
<p>sliderIMG.create('DIVid',{count:*, speed:*, auto:*, timer:*}); </p>
<br />
<pre>必須參數： count ----> 數字類型，圖片數量;
可選參數：
speed ----> 數字類型，滾動速率，默認為：5；
auto ----> 布爾類型，設置自動滾動，為true則自動，反之不自動，默認為： false;
timer ----> 數字類型，設置每個幾秒自動滾動一次，默認為： 5000ms = 5s;
</pre>

</div>
</body>
</html></font>
<a href="http://js.alixixi.com/">歡迎訪問阿里西西網頁特效代碼站，js.alixixi.com</a>

7、網頁製作Dreamweaver有沒有圖片自動播放圖片兩邊還有向左向右的代碼讓我直接改圖片就可以

1、網路上關於圖片自動滾動的案例有許多如：
SuperSlidev2.1、TouchSlide（手機上使用）等功能已經很全。
2、如果不知道怎麼搜索，建議使用下面方法，很容易找到自己想要的東西：
js 幻燈片
或：
jQuyer 幻燈片
在搜索的內容或關鍵詞前，加上對應的分類，中間用空格分隔，這樣會過濾大多不必要的拉結結果。
3、代碼很多，還是建議好好把基礎打老實，這樣就不用到處找代碼了。

8、網頁製作讓網頁上的圖片自動變換的代碼

我理解的沒錯的話你指的是圖片輪播？
給你幾個下載JS代碼的網站，這個是開源的很多的。

http://www.zztuku.com/JS/ 站長圖庫-js代碼頁面
http://js.alixixi.com/ 阿里西西
http://www.oschina.net/code/tag/jquery 開源中國
http://www.5icool.org/a/201308/998.html 酷站代碼-我記得是要注冊

直接搜索關鍵字「焦點圖」就好了，上面兩個是我最常用的。

導航:首頁 > 萬維百科 > 網頁設計自動放映圖片的代碼

網頁設計自動放映圖片的代碼

與網頁設計自動放映圖片的代碼相關的知識