❶ 为什么jpg图片可以动
1、你能保存到硬盘上的动态图片,它的扩展名是jpg。那个文件实际上是gif格式,只是扩展名被改成了jpg,在acdsee中查看,在最下方状态栏图片分辨率的右边就是它的实际格式,看到了吗。 2、网上有很多据说回复后可以变化的图片(多半是美女之类的,实际上不需要回复,刷新一下就行了),你用右键查看可能确认是一张jpg图,那个并不是单纯的图片,而是引用了某些网站上的专门用来随机读取图片的动态网页(比如可能是asp的或者php),举个例子,比如某个网站有一个叫a.asp的页面,当有用户访问a.asp的时候,它就会从服务器上的图形库里(可能有几百或者上千张各种gif、jpg或者bmp等图像文件),随便的选取一个比如是c555.jpg,然后这个a.asp就把这个c555.jpg当做普通图形发送给浏览者,就得到了最终的刷新一下页面就变化一次的结果。
❷ 网站中图片切换是怎么实现的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<input id="Hidden1" type="hidden" value="4.jpg,5.jpg,6.jpg," />
<script type="text/javascript" language="javascript">
var widths=600; //焦点图片宽
var w=2;
var widthss=widths+w;
var heights=265; //焦点图片高
//var heightss=heightss+w;
//var heightt=32;
//总条数
//img1=new Image();在这里是声明了一个图片元素的对象
//后面是对图像的属性进行赋值或设置,如imgs.src="xxxx.jpg"是指定图片的索引地址.
//这个代码一般用于head区,用于预加载图片,即加快图片显示.
//只有用new Images()得到的图片IE7才认,
//而IE6和firefox可认得imgUrl[1]="/y9q9ms7lbgbt.jpg";得到的图片
var str=document.getElementById('Hidden1').value.split(',');
if(str!="")
{
for(var i=0;i<str.length-1;i++)
{//获取图片的数量,并创建对象
eval('img'+(i+1)+'=new Image();');
eval('img'+(i+1)+'.src="'+str[i]+'";');
eval('url'+(i+1)+'=new Image();');
// eval('url'+(i+1)+'.src="javascript:void(0)";');
}
}
var counts=str.length-1;
var nn=1; //当前所显示的滚动图
var key=0; //标识是否为第一次开始执行
var tt; //标识作用
function change_imgbaner()
{
if(key==0){key=1;} //如果第一次执行KEY=1,表示已经执行过一次了。
else if(document.all)//document.all仅IE6/7认识,firefox不会执行此段内容
{
document.getElementById("pic").filters[0].Apply(); //将滤镜应用到对像上
document.getElementById("pic").filters[0].Play(ration=1); //开始转换
document.getElementById("pic").filters[0].SlideStyle='SWAP';//转换效果
document.getElementById("pic").filters[0].Bands=1;
// with(document.getElementById("pic").filters[0])
// { Duration=2;SlideStyle='SWAP';Bands=1; }
}
eval('document.getElementById("pic").src=img'+nn+'.src'); //替换图片
eval('document.getElementById("url").href=url'+nn+'.src'); //替换URL
//eval('document.getElementById("title").value=txt'+nn+'.txt'); //替换ALT
for (var i=1;i<=counts;i++)
{
document.getElementById("xxjdjj"+i).className='axx'; //将下面黑条上的所有链接变为未选中状态
}
document.getElementById("xxjdjj"+nn).className='bxx'; //将当前页面的ID设置为选中状态
nn++;
if(nn>counts){nn=1;} //如果ID大于总图片数量。则从头开始循环
tt=setTimeout('change_imgbaner()',10000); //在4秒后重新执行change_imgbaner()方法.
}
function changeimg(n)//点击黑条上的链接执行的方法。
{
nn=n; //当前页面的ID等于传入的N值,
window.clearInterval(tt); //清除用于循环的TT
//重新执行change_imgbaner();但change_imgbaner()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.
tt=setTimeout('change_imgbaner()',500);
//change_imgbaner();
}
function aHref()
{return;}
//样式表
document.write('<style>');
document.write('.axx{padding:1px 7px;margin:0 5px;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#000;line-height:12px;font:12px sans-serif;background:#fff;border:1px solid #3467cc}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:12px sans-serif;background:#666;}');
document.write('.bxx{padding:1px 7px;margin:0 5px;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:14px;font:14px sans-serif;background:#ff9900;font-weight:900}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:14px;font:14px sans-serif;background:#ff9900;font-weight:900}');
document.write('</style>');
//内容部分
document.write('<div style="width:'+widthss+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;float:left;">');
document.write('<div><a id="url" ><img id="pic" style="border:0px #cbcbcb solid;FILTER: progid:DXImageTransform.Microsoft.Slide(ration=1,slidestyle=SWAP,Bands=1)" width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="background: transparent;width:98%;text-align:right;top:-30px;position:relative;margin:1px;height:32px;border:0px;padding-top:1px;z-index:0;"><div>');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:aHref();" id="xxjdjj'+i+'" class="axx" target="_self" onmouseover="javascript:changeimg('+i+');">'+i+'</a>');}
document.write('</div></div></div>');
//开始执行滚动操作
change_imgbaner();
-->
</script>
</body>
</html>
将你的图片用逗号间隔开,放在hidden隐藏域中就好,宽和高你自己设定。
❸ html中动态切换背景图片的问题
这中情况有很多,第一种可能是的脚本函数有问题,你首先在函数的第一行alert一下,看是否触发了这函数,如果出发,那么就可能是第二种问题,那么就是你函数在执行过程中存在问题,那么在每一行的后面都alert看一是错在那一行。如果这还没有问题那么就可能是你的所给的id元素更不不存在或者你在拼接url的时候拼错了,目前只能看出这么多,你代码有限。如何还有问题可以密我
❹ 请大神解释一下这个网页的jpg图片是怎么动起来的
图片轮播代码,或者图片滚动代码。网上一搜就有。把图片地址换成你的图片就可以啦。jpg单张图片是不会动的,只能用代码多张切换,看起来就像是在动了。单张图片能动的只有gif格式的才能做到
❺ html中图片自动切换
网页链接
我发现一个更牛皮的
❻ Asp动态实现图片轮换显示
现在各大门户网站的新闻、游戏、体育、软硬件等页面都有一个类似Flash播放器的动态图片切换效果,就是一张张的焦点新闻大图不断切换,图片下面的文字也随着图片的切换而变化,而且我们还可以手动点击图片下面的“1、2、3、4”等手动切换,效果相当不错,让页面顿时生色。
例如:http://games.sina.com.cn/ 新浪游戏频道
http://sports.sohu.com/ 搜狐体育频道
http://www.yesky.com/ 天极网首页
http://sports.qq.com/ 腾讯体育频道
细心的朋友可能发现,当我们在这个图片上面单击右键的时候就会发现他是一个Flash格式,很多朋友以为他真是一个Flash,其实它是一个javascript+XML的特效,外加一个Flash外壳,通过javascript动态读取XML中的数据,时刻能自动更新图片和图片的标题。下面给出代码供大家参考。其中的focus.swf需要到网上去下载, 下载地址:http://www.webjx.com/js/focus.swf
<script type="text/javascript">
<!--
imgUrl1="图片链接地址1";
imgtext1="图片文字显示内容1"
imgLink1=escape("链接网页地址1");
imgUrl2="图片链接地址2";
imgtext2="图片文字显示内容2"
imgLink2=escape("链接网页地址2");
imgUrl3="图片链接地址3";
imgtext3="图片文字显示内容3"
imgLink3=escape("链接网页地址3");
var focus_width=180//图片宽
var focus_height=220//图片高
var text_height=18//文字显示高度
var swf_height = focus_height+text_height
var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3
var links=imgLink1+"|"+imgLink2+"|"+imgLink3
var texts=imgtext1+"|"+imgtext2+"|"+imgtext3
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
</script>
</body>
</html>
❼ html怎样实现图片自动切换
1、首先,打开html编辑器,新建html文件,例如:index.html。