網頁設計替換圖片_網頁設計html圖片切換怎麼做到的

1、網頁製作是如何實現圖片切換的？

新建項目文件夾如下圖所示

編寫index.html文件，代碼如下：

<html>

<head>

<title>

lunbo

</title>

</script>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

編寫style.css文件，代碼如下：

*{ margin:0px; text-decoration:none;}

body{margin-top:50px;}

#container{width:600px; height:400px; position:relative;border:3px solid #333;overflow: hidden; margin:0 auto;}

#list{width:4200px; height:400px; position:absolute; z-index:1;}

#list img{float:left;}

#buttons{position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:250px;}

#buttons span{cursor:pointer;/*假超鏈接樣式*/ float:left; border:1px solid #fff; width:10px; height:10px; border-radius:10px; background:#333; margin-right:5px;}

#buttons .on{background:orangered;}

.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px;

font-weight:bold; width:40px; height:40px; position:absolute; z-index:2; top:180px;

background-color: RGBA(0,0,0,.3); color:#fff;}

.arrow:hover{background-color:RGBA(0,0,0,.7);}

#container:hover .arrow{display:block;}

#prev{left:20px;}

#next{right:20px;}

編寫control.js文件代碼如下

window.onload=function(){

var container=document.getElementById('container');

var list=document.getElementById('list');

var buttons=document.getElementById('buttons').getElementsByTagName('span');

var pre=document.getElementById('prev');

var next=document.getElementById('next');

var index=1;

var animated=false;

var timer;

function showButton(){

for(var i=0;i<buttons.length;i++){

if(buttons[i].className=='on'){

buttons[i].className='';

break;

}

buttons[index-1].className="on";

}

function animate(offset){

animated=true;

var newleft=parseInt(list.style.left)+offset;

var time=300;//位移總時間

var interval=10;//位移間隔時間

var speed=offset/(time/interval);//每一次的位移量

function go(){

if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style. left)<newleft)){

list.style.left=parseInt(list.style.left)+speed+'px';

setTimeout(go,interval);

}

else{

animated=false;

list.style.left=newleft+'px';

if(newleft>-600){

list.style.left=-3000+'px';

}

if(newleft<-3000){

list.style.left=-600+'px';

}

go();

}

function play(){

timer=setInterval(function(){

next.onclick();

},3000);

}

function stop(){

clearInterval(timer);

}

next.onclick=function(){

if(index==5){

index=1;

}

else{

index+=1;

}

showButton();

if(animated==false){

animate(-600);

}

pre.onclick=function(){

if(index==1){

index=5;

}

else{

index-=1;

}

showButton();

if(animated==false){

animate(600);

}

for(var i=0;i<buttons.length;i++){

buttons[i].onclick=function(){

if(this.className=='on'){

return;

}

var myIndex=parseInt(this.getAttribute('index'));

var offset=-600*(myIndex-index);

index=myIndex;

showButton();

if(animated==false){

animate(offset);

}

container.onmouseover=stop;

container.onmouseout=play;

play();

}

images文件的圖片截圖如下

運行效果截圖如下：

2、在網頁製作是如何實現圖片切換

在DreamWeaver中實現滑鼠圖片切換效果可以使用『滑鼠經過圖像』功能來實現
也可以用CSS控制來實現。
『滑鼠經過圖像』功能簡單明了。不需多講，多試幾次即可掌握。
現在具體講一下 CSS控制實現圖片切換效果！
首先製作一個 ID為abc 的div 寬度50px; 高度50px; 在abc裡面隨便打一個字設置一個空鏈接。

然後定義 abc 寬度50px; 高度50px; a標簽的塊形式代碼如下：
<style type="text/css">

</style>

<div id="abc"><href="#">字體</a></div>
然後設置 div的背景圖片比如圖片名為 bj.gif
CSS代碼變為：
<style type="text/css">

</style>
最後設置滑鼠經過的樣式比如滑鼠經過圖片為 bjj.gif
CSS代碼變為如下：
<style type="text/css">

</style>

3、製作網頁如何實現點擊按鈕替換圖片

你是說滑鼠移到鏈接上，鏈接圖片替換？一般這個圖片是作為鏈接（或鏈接內某元素）的背景，那麼到滑鼠移動到鏈接(也就是<a>標簽)時，此時他的樣式可以寫成 a:hover{ background:url("要替換成的圖片地址"); } 下面給你一個例子： <style type="text/css"> .test{ float:left; padding:30px 50px; background:url( http://www.baidu.com/img/baidu_sylogo1.gif ) no-repeat center center; cursor:pointer; } .test:hover{ background:url( http://cache.soso.com/wenwen/i/w_logo.png ) no-repeat center center; } .test2 span{ float:left; padding:30px 50px; background:url( http://www.baidu.com/img/baidu_sylogo1.gif ) no-repeat center center; cursor:pointer; } .test2:hover span{ background:url( http://cache.soso.com/wenwen/i/w_logo.png ) no-repeat center center; } </style> <a class="test" href="#">這是一個例子</a> <a class="test2" href="#"><span>這是另一個例子</span></a>

4、網站設計中為什麼eclipse中替換圖片不起作用

解決方法復
既制然已經明白是由於eclipse沒有把最新的資源文件拷貝過去，所以我們只需要把項目bin目錄下的res目錄刪除（可連同bin下生成的.apk、.dex和.ap_等三個文件一並刪除），然後再將項目生成apk文件即可。
其它補充：
每次運行會將res文件夾拷到bin下,由於替換圖片時,eclipse不清楚是否有圖片改變,所以會使用原來bin下的res中的資源文件進行打包,所以圖片仍為原來的
你只要到項目bin目錄刪除res目錄即可(可連同bin下生成的apk,dex,ap_文件一並刪除)
另外在bin下有一個classes應該就是相應java文件生成的class文件

5、網頁製作里的圖片自動換怎麼製作？

這是用到了JS，就是Javascript，一中腳本控制語言，樓主可以去網路下，js圖片特效，基本所有的特效都有，像懸浮的窗口，圖片自動換等

6、網頁設計html圖片切換怎麼做到的？

圖片切換要用到JAVASCRIPT技術了，不知道樓主學了沒，但是javascript做起來會比較困難，用jquery來做就會簡單很多，裡面封裝了許多方法

7、網頁製作中，如何替換現有圖片及文字。操作需具體

比如你的網頁中有個復a.gif的圖製片，並且應用到網頁中了。那麼你只需要上傳一個a.gif把他替換就可以了。或者你的網頁用有<img src="a.gif"/>那麼你可以上傳一個b.gif然後把a改成bb就可以了！
希望採納

8、使用eclipse做網頁設計替換圖片不起作用？

應該還是路徑的問題吧，你看看瀏覽器里的圖片路徑是什麼，看看跟你的相對路徑在哪裡有什麼差別。
看生成的靜態頁面的source
路徑的問題拉.
不一定要寫絕對路徑滴.
可以看看不能顯示的圖片屬性的路徑指向.

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

我理解的沒錯的話你指的是圖片輪播？
給你幾個下載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 酷站代碼-我記得是要注冊

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

10、網頁製作中怎麼做出點擊按鈕更換圖片的效果

更改圖片有兩個辦法

第一個是將所有圖片載入，但是只顯示一張圖片，其餘的隱藏，每點擊一次，將當前的隱藏，下一個顯示。

<div>
<img class="img" src="1.jpg" />
<img class="img" src="2.jpg" style="display:none" />
<img class="img" src="3.jpg" style="display:none" />
…………
<div>/*jq 代碼 button click事件*/
if(!num){
num = 0;//初始化計數
}
$(".img").hide();
$(".img").eq(num).show();
num++;

第二個是添加一個img，每次點擊時候，更改img的src，即圖片路徑。

<div>
<img class="img" src="1.jpg" />
<div>/*jq 代碼 button click事件*/
if(!num){
num = 0;//初始化計數
}
$(".img").attr("src",num+".jpg");
num++;

導航:首頁 > 萬維百科 > 網頁設計替換圖片

網頁設計替換圖片

與網頁設計替換圖片相關的知識