简单图片轮换代码_简单的图片轮换代码

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数字一起切换

有小图大图一起切换

里面有教程和源码

简单图片轮换代码

与简单图片轮换代码相关的内容