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

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

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

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

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

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

編寫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文件的圖片截圖如下

運行效果截圖如下：

3、怎樣用css+div 讓網頁三張圖片自動切換

需要用到js 如果只是為了要這個效果，搜索一下有很多，如果要學習的話，建議從開始學起

4、html5+css3實現圖片自動切換

既然樓主的問題竟然一年沒找到滿意答案……

不才剛剛開始學css3，願意跟樓主分享一下圖片切換心得。如果樓主現在已經找到了解決方案，那請樓主無視我的答案。

首先，lp52761十五級大神的答案貌似不是很確切，其實css3+html5非常強大，基本上可以脫離js，除非要做出能響應移動設備觸屏事件的網站，或者我的觀點也落伍了，html5+css3也可以做出觸屏響應特效。

我看csdn右側圖片切換有點類似opacity的變化，那麼樓主不妨用keyframes方法在opacity上做文章；例如：
先定義一個keyframe
@keyframes qiehuan {
30%{opacity:1;}
60%{opacity:0;}
}

之後為圖片容器做一個類：
.container{
/*這里長寬高邊框邊距之類的東西你自己隨便寫。*/
}

然後為你的圖片們定義專屬類：
.tupianmen{
position:absolute;
//此處調用keyframe方法
animation:qiehuan 20s infinite;
opacity:0;
}

然後用css3獨有的nth-child選擇器來選擇你要切換的圖片
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:5s;}
img:nth-child(2){animation-delay:10s;}
img:nth-child(1){animation-delay:15s;}

接下來你就可以寫html了：
<!DOCTYPE html>
<html>
...... 略掉雜七雜八的東西......
<div class="container">

<img class="tupianmen" src="你的圖片1" />
<img class="tupianmen" src="你的圖片2" />
<img class="tupianmen" src="你的圖片3" />
<img class="tupianmen" src="你的圖片4" />

</div>

</html>
寫完之後保存，查看效果如何
對了，差點忘了，如果用不同瀏覽器的話，可能需要簡單更改一下keyframe或者animation的前綴，比如加一個-webkit-才行。

望採納。。。

5、網頁設計css怎麼設置圖片翻轉

transform屬性，方法有很多，可以設置不同的翻轉

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

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

7、CSS怎麼實現更換圖片

CSS能更換的圖片，只能存在於樣式中。所以，這個圖片也只能是背景圖片。

一般是結合：hover來實現的。例如：

.mydiv{

background:圖片1no-repeat;

height:100px;

widht:100px;

}

.mydiv:hover{

background:圖片2no-repeat;

}

這樣就實現了圖片1和圖片2的滑鼠移上去的切換。

8、網頁設計中怎麼是圖片自動切換，是css控制還是語言控制、如何控制

是js、jq或者flash做的。你可以去「懶人圖庫」網站找「焦點圖」，有很多。具體怎麼控制一句兩句也說不清吧。

9、css怎麼實現點擊切換圖片

那不是圖片是特殊文字 fonticon 圖標字體
和普通文字一樣只要改color 就能變色

導航:首頁 > 萬維百科 > 網頁設計css怎麼讓圖片切換

網頁設計css怎麼讓圖片切換

與網頁設計css怎麼讓圖片切換相關的知識