導航:首頁 > 萬維百科 > 網頁設計多張圖片替換的代碼

網頁設計多張圖片替換的代碼

發布時間:2021-01-03 04:10:07

1、網頁製作有一個區域圖片可以不斷自動切換,這種效果怎樣做,代碼是什麼?大神們幫幫忙

用JS+FLASH的效果還可以,我這有個ASP的,需要的話可以發給你參考

2、網頁設計中怎麼讓一張圖片填充滿整個畫面 求代碼

CSS背景抄代碼 :body { background:#fff url(images/bg.jpg) repeat-x center top;}

上面就是當前網頁使用images下的bg.jpg做為背景 。repeat-x 橫向重復.你可以測試 一下。

3、製作網頁怎樣做圖片切換效果?最好詳細代碼!

效果主要做的是無縫切換圖片:
<style>
*{ margin:0; padding:0; list-style:none;}
#box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}
#box ul{ position:absolute; left:0; top:0;}
#box ul li{ width:200px; height:200px; float:left; padding:5px;}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var oUl=oBox.children[0];
var aLi=oUl.children;

//復制一份內容 ,製作出無縫的效果
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';

setInterval(function(){ //開定時器,這樣就可以自己切換,無需人工干預。
var l=oUl.offsetLeft-10; //圖片切換,就是移動距離
if(l<=-oUl.offsetWidth/2){
l=0;
}
oUl.style.left=l+'px';
},30);
};
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/1.jpg" width="200"></li>
<li><img src="img/2.jpg" width="200"></li>
<li><img src="img/3.jpg" width="200"></li>
<li><img src="img/4.jpg" width="200"></li>
</ul>
</div>

4、javascript 網頁設計 怎麼在同一位置顯示幾張不同的圖片(圖片自動變換)。

看看是不是這種圖片切換
在同一個位置切換圖片
還有12345數字一起切換
滑鼠點一下數字會變換到另一張圖片,不點就會自動換
裡面有教程和源碼

5、html求製作一個簡單網頁代碼,只需要一些文字加張圖片

完整的代碼如下:
<html>
<head>
<title>簡單網頁製作練習</title>
</head>
<body>
<p>1.文字內容,直接輸入文字即可。。。。。如果想設置其相關屬性可以使用font標簽
<font size="18" color="red" >紅色18號文字</font> </p>
<p> 2.添加圖片 <img src="圖片名稱.屬性" id=「圖片簡介」>
<img src="1.jpg" id=" 加入圖片練習"> </p>
</body>
</html>
樓主,如果不明白可以HI聯系我。。。。

6、求 網頁設計三張圖片輪流切換的代碼,簡單點的就可以

&

7、網頁設計的javacsript的圖片切換代碼, 誰能幫我寫個例子 滑鼠指向1234的那種, 不需要任何特效

無標題文檔 ul{ list-style:none;} li{ display:inline; float:left; margin-left:15px; display:none;} img{border:5px solid #000; width:100px; height:100px;} .pagediv{ clear:both; margin:15px; display:block;} .pagediv a{border:1px solid #c9c9c9; margin-left:5px;}function changepic(num,n){ //num當前要顯示的圖片 n 圖片總數for(i=1;i var menu=document.getElementById("pic"+i); menu.style.display=i==num?"block":"none";}} https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/xuan2009pengyo/abpic/item/76e0ea14cf71977ef2de32dc.jpg
" /> https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/matlabsky/abpic/item/91c9a0cbb5a2607ef21fe7ba.jpg
" /> 1234

8、網頁設計中如何設置兩張圖片每隔幾秒循環切換怎麼寫代碼

//下面是可配置輪播動畫代碼
$.fn.slide=function(options){
var defaults= {
affect:1, //1:上下滾動; 2:幕布式; 3:左右滾動;4:淡入淡出
time: 5000, //間隔時間
speed:500, //動畫快慢
dot_text:true,//按鈕上有無序列號
};
var opts=$.extend(defaults,options);

var $this=$(this);
var ool=$("<div class='dot'><p></p></div>");
var $box=$this.find("ul");
var $li=$box.find("li");
var timer=null;
var num=0;

$this.append(ool);
$box.find("li").each(function(i){
ool.find("p").append($("<b></b>"));
if(opts.dot_text){
ool.find("b").eq(i).html(i+1)
}
})
ool.find("b").eq(0).addClass("cur");
switch(opts.affect){
case 1:
break;
case 2:
$box.find("li").css("display","none");
break;
case 3:
$box.css({"width":$li.eq(0).width()*$li.length});
$li.css("float","left");
break;
case 4:
$box.find("li").css("display","none");
break;
}
$box.find("li").eq(0).show(0);
ool.find("b").mouseover(function(){
num=$(this).index();
run ();
})
timer=setInterval(auto,opts.time);
function auto(){
num<$box.find("li").length-1?num++:num=0;
run();
}
function run(){
ool.find("b").eq(num).addClass("cur").siblings().removeClass("cur");
switch(opts.affect){
case 1:
$box.stop(true,false).animate({"top":-240*num},opts.speed);
break;
case 2:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).slideDown(opts.speed);
break;
case 3:
$box.stop(true,false).animate({"left":-670*num},opts.speed);
break;
case 4:
$box.find("li").css({"position":"absolute"});
$box.find("li").stop(false,true).fadeOut(opts.speed).eq(num).fadeIn(opts.speed);
break;
}
}
$this.mouseover(function(){
clearInterval(timer);
})
$this.mouseout(function(){
timer=setInterval(auto,opts.time);
})
}
}(jQuery));

9、網頁設計中怎麼讓一張圖片填充滿整個畫面 求代碼

1、如果樓主只是將其當做一張圖片顯示,可以通過css控制,如img{width:100%;height:100%;}.
否則需要將其作為網頁背景的話可以試試如下方法:
2、如果這張圖片為背景圖片由於背景圖片不具有伸縮性,只能通過別的方法繞著解決,在ie中可以用<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">,實現背景拉伸鋪滿整個瀏覽器,但其它的瀏覽器不支持。
這時可以拐個彎,設置兩層div,底層div當做背景使用,放置一張圖片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
再將網頁內容放置到第二層上<div id="content">頁面內容</content>
3、網頁背景圖片默認情況下是重復平鋪滿整個頁面。上面2方法是要求圖片不重復,但又得占滿瀏覽器所採用的方法。

與網頁設計多張圖片替換的代碼相關的知識