簡單圖片輪換代碼_簡單的圖片輪換代碼

A. HTML圖片輪播代碼怎麼寫

html部分

<divid="container">
	<divclass="sections">
		<divclass="section"id="section0"><h3>thisisthepage1</h3></div>
		<divclass="section"id="section1"><h3>thisisthepage2</h3></div>
		<divclass="section"id="section2"><h3>thisisthepage3</h3></div>
		<divclass="section"id="section3"><h3>thisisthepage4</h3></div>
	</div>
</div>

css部分

*{
		padding:0;
		margin:0;
	}
	html,body{
		height:100%;
	}
	#container{
			width:100%;
			height:500px;
			overflow:hidden;
	}
	.sections,.section{
		height:100%;
	}
	#container,.sections{
		position:relative;
	}
	.section{
		background-color:#000;
		background-size:cover;
		background-position:50%50%;
		text-align:center;
		color:white;
	}
	#section0{
		background-image:url('images/1.jpg');
	}
	#section1{
		background-image:url('images/2.jpg');
	}
	#section2{
		background-image:url('images/3.jpg');
	}
	#section3{
		background-image:url('images/4.jpg');
	}
	.pagesli{list-style-type:none;width:10px;height:10px;border-radius:10px;background-color:white}.pagesli:hover{box-shadow:005px2pxwhite}.pagesli.active{background-color:orange;box-shadow:005px2pxorange}.pages{position:absolute;z-index:999}.pages.horizontal{left:50%;transform:translateX(-50%);bottom:5px}.pages.horizontalli{display:inline-block;margin-right:10px}.pages.horizontalli:last-child{margin-right:0}.pages.vertical{right:5px;top:50%;transform:translateY(-50%)}.pages.verticalli{margin-bottom:10px}.pages.verticalli:last-child{margin-bottom:0}

JS部分

<scriptsrc="js/jquery-1.11.0.min.js"type="text/javascript"></script>
//引入pageSwitch.min.js
<script>
	$("#container").PageSwitch({
		direction:'horizontal',
		easing:'ease-in',
		ration:1000,
		autoPlay:true,
		loop:'false'
	});
</script>

B. 求簡單的圖片切換代碼

第一種：
把如下代碼加入<body>區域中
<body onclick=Clicked()>
<SCRIPT>

</SCRIPT>
<DIV id=image>
<DIV id=text1></DIV><IMG id=image1
src=「Upfiles/200422684962.gif「
style=「FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden「> <IMG id=image2 src=「Upfiles/200422684962.gif「
style=「FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden「> </DIV>
<DIV id=text2></DIV>

第二步：把<body>中的內容改為：
<body bgcolor=「#fef4d9「 onclick=Clicked()>

over feboy

第二種：

第一步、把下面這段代碼插入到頁面的<head>與</head>之間：

<script language=javascript>
isns = navigator.appName == "Netscape";
function ztstr(id,picurl,linkurl)
{
this.id=id
this.picurl=picurl
this.linkurl=linkurl
}

zhuanti=new Array()
imgcount=1;
frequency=10*1000;//30秒

//在這里修改圖片的路徑和鏈接
zhuanti[1]=new ztstr('1','http://www.windstudio.net/banner/banner1.gif','http://www.windstudio.net')
zhuanti[2]=new ztstr('2','http://www.windstudio.net/banner/banner2.gif','http://www.windstudio.net')
zhuanti[3]=new ztstr('3','http://www.windstudio.net/banner/banner3.gif','http://www.windstudio.net')
zhuanti[4]=new ztstr('4','http://www.windstudio.net/banner/banner4.gif','http://www.windstudio.net')

imgcount=zhuanti.length-1
for(i=1;i<=imgcount;i++)
{
eval_r("img"+i+"=new Image()")
eval_r("img"+i+".src=zhuanti["+i+"].picurl")
}

nn=1

var rand1 = 0;
var useRand = 0;

function swapPic() {
var imgnum = zhuanti.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
// alert(useRand);
nn=useRand;
change_img();
}

function change_img()
{
eval_r('document.pic.src=img'+nn+'.src');
nn++;
if(nn>imgcount) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'",frequency);
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',frequency)
}

function pictarget()
{
tt=nn-1
if(tt<1) tt=imgcount
cururl=zhuanti[tt].linkurl
window.open(cururl);
}
function ini()
{
if(!isns)
{
spacewidth=Math.round((divmask.offsetWidth-770)/2)
dmwidth=770+spacewidth
dmheight=divmask.offsetHeight
totalstep=50
timeout=50
dmstepw=Math.round(770/totalstep)
dmsteph=Math.round(dmheight/totalstep)
setTimeout('hidimg()',3000)
}
else swapPic()
}

function hidimg()
{
dmwidth-=dmstepw
dmheight-=dmsteph
eval_r('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')
hdrun=setTimeout('hidimg()',timeout)
if(dmwidth<=spacewidth&&dmheight<=0)
{
divmask.style.visibility='hidden'
clearTimeout(hdrun)
swapPic()
}
}
</script>

第二步、調用定義好的javascript函數，在<body>里加上以下代碼：

<body onload=swapPic()>

第三步、在頁面中插入圖片和鏈接：

<a href=javascript :void(null) onclick='javascript :pictarget();return false;'><img src="http://www.windstudio.net/banner/banner1.gif" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(ration=2.0,transition=12)"></a>

好，到這里就大功告成了。另外，試試改變transition的數值，可以得到不同的轉換效果喲~~

C. HTML圖片輪播代碼怎麼寫

（1）<div id="butong_net_left" style="overflow:hidden;width:1000px。

（2）"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="butong_net_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center">

D. 求最簡單的圖片輪換代碼，下面有數字那種

試試這個圖片切換

有12345數字一起切換

滑鼠點一下數字會變換到另一張圖片，不點就會自動換

裡面有教程和源碼

E. js圖片輪換代碼怎麼實現，跪求～

其實很簡單,方法也很多,不知道你想用什麼方法實現.
先介紹兩種比較簡單的
注:圖片大小之類的自己用CSS控制;
頁面加入<img id="imgId"/>標簽
然後引入javascript:
核心:
//給定圖片路徑數組
var imgs = ['1.jpg','2.jpg',...]
function switchoverCore(){
var img = document.getElementById("imgId");
img.src = imgs.shift(0);
imgs.push(img.src);
//如果用下面的第一種方法,請刪除下行注釋,第二種不用下行代碼
//setTimeout("switchoverCore()",1000);
}
第一種方法
運用setTimeout();

setTimeout("switchoverCore();",1000);//這里的1000是1秒輪換一次,單位為ms(毫秒)

第二種方法
運用setInterval();
setInterval("switchoverCore()",1000);//1000意義解釋同上

自己整理下就可以了...

F. 網頁的圖片輪換的代碼是什麼

<div style="margin-left:15px; margin-top:10px; margin-right:10px; width:230px;">

<style type="text/css">



</style>

<script language='javascript' type='text/javascript'>

var imgWidth=230; //圖片寬

var imgHeight=170; //圖片高

var textFromHeight=20; //焦點字框高度 (單位為px)

var textStyle='fb'; //焦點字class style (不是連接class)

var textLinkStyle='p1'; //焦點字連接class style

var buttonLineOn='#F00'; //button下劃線on的顏色

var buttonLineOff='#000'; //button下劃線off的顏色

var TimeOut=5000; //每張圖切換時間 (單位毫秒);

var imgUrl=new Array();

var imgLink=new Array();

var imgtext=new Array();

var imgAlt=new Array();

var adNum=0;

//焦點字框高度樣式表開始

document.write('<style type="text/css">');

document.write('#focuseFrom{width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;}');

document.write('#txtFrom{height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;}');

document.write('#imgTitle{width:'+imgWidth+';top:-'+(textFromHeight+11)+'px; height: 18px}');

document.write('</style>');

document.write('<div id="focuseFrom">');

//焦點字框高度樣式表結束

imgUrl[1]='/images/content/2012/20120604154259198160.jpg';

imgtext[1]='<a target="_blank" href="/zjzx/tpxw/54826.html">國家紡織檢測重點實驗室聯盟總部落戶無錫</a>';

imgLink[1]='/zjzx/tpxw/54826.html';

imgAlt[1]='國家紡織檢測重點實驗室聯盟總部落戶無錫';

imgUrl[2]='/images/content/2012/20120601143224661455.jpg';

imgtext[2]='<a target="_blank" href="/zjzx/tpxw/54780.html">保障質量安全守望兒童幸福</a>';

imgLink[2]='/zjzx/tpxw/54780.html';

imgAlt[2]='保障質量安全守望兒童幸福';

imgUrl[3]='/images/content/2012/20120529093056858140.jpg';

imgtext[3]='<a target="_blank" href="/zjzx/tpxw/54690.html">杭州檢驗檢疫局有效防控外來有害生物入侵</a>';

imgLink[3]='/zjzx/tpxw/54690.html';

imgAlt[3]='杭州檢驗檢疫局有效防控外來有害生物入侵';

imgUrl[4]='/images/content/2012/20120529092955413952.jpg';

imgtext[4]='<a target="_blank" href="/zjzx/tpxw/54689.html">宜興檢驗檢疫局確保茶葉出口質量安全</a>';

imgLink[4]='/zjzx/tpxw/54689.html';

imgAlt[4]='宜興檢驗檢疫局確保茶葉出口質量安全';

function changeimg(n)

{

adNum=n;

window.clearInterval(theTimer);

adNum=adNum-1;

nextAd();

}

function goUrl()

{ window.open(imgLink[adNum]);

}

//NetScape開始

//if (navigator.appName == "Netscape")

//{
function nextAd()

{

if (adNum<(imgUrl.length-1)) adNum++;

else adNum=1;

theTimer=setTimeout("nextAd()", TimeOut);

document.images.imgInit.src=imgUrl[adNum];

document.images.imgInit.alt=imgAlt[adNum];

document.getElementById('focustext').innerHTML=imgtext[adNum];

document.getElementById('link'+adNum).style.background=buttonLineOn;

document.getElementById('imgLink').href=imgLink[adNum];

for (var i=1;i<=imgUrl.length;i++)

{

if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;}

}

}
document.write('<a id="imgLink" href="'+imgLink[4]+'" target=_blank class="linkwhite"><img src="'+imgUrl[4]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[4]+'" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="'+textStyle+'">'+imgtext[4]+'</span></div>')

document.write('<div id="imgTitle">');

document.write('<div id="imgTitle_down">');
//數字按鈕代碼開始
for(var i=1;i<imgUrl.length;i++){document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" class="button" title="'+imgAlt[i]+'" onFocus="this.blur()" target=_self>'+i+'</a>');}
//數字按鈕代碼結束 document.write('</div>');
document.write('</div>');
document.write('</div>');
nextAd();

</script> </div>

G. 實現自動圖片輪換的javascript代碼

方法一：圖片輪換時利用revealTrans濾鏡產生轉換效果：

<img src="face/face1.gif" id="turn" width="200"
style="filter:revealTrans(ration=1)">
<script>
var obj,first,total,cn,delay=2000
function window.onload(){
obj=document.getElementById("turn") //捕獲ID為turn的對象
first=1 //第一張圖片的路徑信息
total=18 //最後一張圖片的路徑信息
cn=1 //當前顯示的圖片路徑信息
setTimeout("change()",delay/2)
//delay/2毫秒後執行change()函數
}
function change(){
url="face/face" //圖片路徑的前部分
suffix=".gif" //圖片的擴展名
if(cn<total) //如果當前圖片數字小於最後一張的圖片數字
url+=(cn+=1)+suffix //cn自增1，並連接字元串得到url
//否則如果當前圖片數字等於最後一張的圖片數字，即輪換到最後一張時
else if(cn==total)
//cn重調為first(第一張圖片)，並且連接字元串得到url
url+=(cn=first)+suffix
with(obj.filters.revealTrans){
apply() //捕獲對象內容的初始顯示，為轉換做必要的准備
//revealTrans濾鏡的轉換效果，0到22為23種效果，
//23為23種效果的隨機一種
transition=23
obj.src=url //設置圖片的路徑
play() //開始轉換。
}
setTimeout("change()",delay)//delay毫秒後再次執行change()函數
}
</script>

方法二：利用wipe濾鏡進行左右擦洗式輪換

<img src="face/face1.gif" id="turn" width="200"
style="filter:progid:DXImageTransform.Microsoft.Wipe(GradientSize=.5, wipeStyle=0, motion=』forward』)">
<script>
var obj,first,total,cn,delay=2000
function window.onload(){
obj=document.getElementById("turn")//捕獲ID為turn的對象
first=1 //第一張圖片的路徑信息
total=18 //最後一張圖片的路徑信息
cn=1 //當前顯示的圖片路徑信息
setTimeout("change()",delay/2)//delay/2毫秒後執行change()函數
}
function change(){
url="face/face" //圖片路徑的前部分
suffix=".gif" //圖片的擴展名
if(cn<total) //如果當前圖片數字小於最後一張的圖片數字
url+=(cn+=1)+suffix //cn自增1，並連接字元串得到url
//否則如果當前圖片數字等於最後一張的圖片數字，即輪換到最後一張時
else if(cn==total)
//cn重調為first(第一張圖片)，並且連接字元串得到url
url+=(cn=first)+suffix
with(obj.filters[0]){
apply() //捕獲對象內容的初始顯示，為轉換做必要的准備
ration=delay/1000//設置轉換完成所用的時間為delay/1000秒
//用這個方法實現左右互換擦除的效果
motion={reverse:』forward』,forward:』reverse』}[motion]
obj.src=url //設置圖片的路徑
play() //開始轉換。
}
setTimeout("change()",delay)//delay毫秒後再次執行change()函數
}
</script>

注意：圖片名必須帶有數字規律，而且擴展名一致。
提示：方法二的左右擦洗輪換的詳細實現過程主要是依靠自定義對象的簡略式寫法。假設motion的當前值為"reverse"，則

motion={reverse:』forward』,forward:』reverse』}[motion]

相當於

motion={reverse:』forward』,forward:』reverse』}["reverse"]

即

motion="forward"

如果motion的當前值為"forward"，則

motion={reverse:』forward』,forward:』reverse』}[motion]

相當於

motion={reverse:』forward』,forward:』reverse』}["forward"]

即

motion="reverse"

所以motion的值就在"reverse"和"forward"之間不斷輪換
特別提示
方法一的代碼運行後，face文件夾下的圖片face1.gif到face18.gif將從第一張到最後一張每兩秒輪換一次，並且每次輪換的轉換效果是23種轉換效果里的隨機一種。方法二的代碼運行後，除了轉換的效果是左右輪換式的擦洗效果，其它情況同方法一。：
圖片輪換的圖片文件名通常是有規律的序列，比如說是從1到N，然後設置定時器，每隔一段時間換一張圖片，圖片文件名作為一個自加變數，在輪換完後再從頭開始。另外在任意兩張圖片的輪換時還會有一些轉換的過渡效果，這個主要依靠轉換濾鏡來實現。

或者看看這里:http://yanshi.veeqi.com/code/jscode/pcaoto/

H. 求網頁設計三張圖片輪流切換的代碼，簡單點的就可以

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三圖片輪換</title>
</head>
<body>
<img id="theImg" src="圖片地址1" />
<script>
var arr=[『圖片地址1』,』圖片地址2『,』圖片地址3『];
var atheImg=document.getElementById('theImg');
var t=1;
setInterval(function()
{
atheImg.src=arr[t];
t++;
if(t==3)
{
t=0;
}
},2000)
</script>
</body>
</html>
要求是，這三個圖片地址要在這個文件所在的站點下！
不知道能不能幫上你什麼！

I. 簡單的圖片輪換代碼

試試這個圖片輪換

有12345數字一起切換

滑鼠點一下數字會變換到另一張圖片，不點就會自動換

裡面有教程和源碼

J. 圖片輪換代碼解釋

試試這個圖片輪換

有12345數字一起切換

有小圖大圖一起切換

裡面有教程和源碼

簡單圖片輪換代碼

與簡單圖片輪換代碼相關的內容