淘宝HTML图片自动切换有123那些的就是鼠标移到到1就切换到第一次图(必须HTML代码)

由于淘宝只支持HTML代码问下那些店铺在自定义区用HTML代码怎么弄出的图片自动切换我查看源码后都有CALSS类.可是淘宝不支持CSS的.....那为高人来段图片手自动切换代码必须HTML的.....

第一种:
把如下代码加入<body>区域中
<body onclick=Clicked()>
<SCRIPT>
<!--
transeffect = 0;
theeffects = new Array(24);
theeffects[0] = “盒状收缩“;
theeffects[1] = “盒状向外“;
theeffects[2] = “圆形收缩“;
theeffects[3] = “圆形向内“;
theeffects[4] = “从下向上“;
theeffects[5] = “从上向下“;
theeffects[6] = “从左向右“;
theeffects[7] = “从右向左“;
theeffects[8] = “百页窗形向右“;
theeffects[9] = “百页窗形向下“;
theeffects[10] = “棋盘形交叉向右“;
theeffects[11] = “棋盘形交叉向下“;
theeffects[12] = “随意溶解形“;
theeffects[13] = “左右向内“;
theeffects[14] = “左右向外“;
theeffects[15] = “上下向内“;
theeffects[16] = “上下向外“;
theeffects[17] = “条纹状向左下“;
theeffects[18] = “条纹状向左上“;
theeffects[19] = “条纹状向右下“;
theeffects[20] = “条纹状向右上“;
theeffects[21] = “溶解水平状“;
theeffects[22] = “溶解上下状“;
theeffects[23] = “随着溶解“;
current_image = “image1“;
function Clicked() {
var the_image, the_other;
text2.style.visiblity=“hidden“;
if (image1.style.visibility==“inherit“) {
the_image = image2;
the_other = image1;
}
else {
the_image = image1;
the_other = image2;
}
the_other.style.visibility=“hidden“;
the_image.filters.item(0).Apply();
the_image.filters.item(0).Transition = transeffect;
the_image.filters.item(0).Play(2.0);
the_image.style.visibility=“inherit“;
text2.innerText=theeffects[transeffect];
transeffect++;
if (transeffect == 24)
transeffect = 0;
text2.style.visibility=“visible“;
}
//-->
</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(duration=2.0,transition=12)"></a>

好,到这里就大功告成了。另外,试试改变transition的数值,可以得到不同的转换效果哟~~
温馨提示:内容为网友见解,仅供参考
第1个回答  2010-10-14

试试这个图片切换

有12345数字一起切换

鼠标点一下数字会变换到另一张图片,不点就会自动换

里面有教程和源码

参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?5=a&id=10895

本回答被提问者采纳
第2个回答  2013-04-11
这是js代码:
function sk(k){
for(b=1;b<6;b++){
if(k == b){
document.getElementById("liimg"+b).src = "img/sz"+b+".png";
document.getElementById("img"+b).style.display = "block";
}else{
document.getElementById("liimg"+b).src = "img/sz_"+b+"_2.jpg";
document.getElementById("img"+b).style.display = "none";
}
}
}
function wohuan(k){
for(p=1;p<6;p++){
var lei = document.getElementById("img"+p).style.display;
if(lei == "block"){
var t=p+k;
if(t<1){
sk(5);
break;
}else if(t>5){
sk(1);
break;
}else{
sk(t);
break;
}
}
}
}
var f =setInterval("wohuan(1)",2000);

这是html代码:
<div id="imghuan">
<div id="img1" style="display:block">
<a href="#" title="jfsk" target="_blank"><img src="img/biantu.jpg" width="385" height="276" style="margin-top:3px" /></a>
<a href="#" title="dkf" target="_blank"><p class="imgxp">到交罚款的减肥蒂芬来的地方</p></a>
</div>
<div id="img2" style="display:none">
<a href="#" title="jfsk" target="_blank"><img src="img/v.jpg" width="385" height="276" style="margin-top:3px" /></a>
<a href="#" title="dkf" target="_blank"><p class="imgxp">到交dddddddddddddddddd的地方</p></a>
</div>
<div id="img3" style="display:none">
<a href="#" title="jfsk" target="_blank"><img src="img/fz1.jpg" width="385" height="276" style="margin-top:3px" /></a>
<a href="#" title="dkf" target="_blank"><p class="imgxp">到交罚gdfgfg款的减肥蒂芬来的地方</p></a>
</div>
<div id="img4" style="display:none">
<a href="#" title="jfsk" target="_blank"><img src="img/01.jpg" width="385" height="276" style="margin-top:3px" /></a>
<a href="#" title="dkf" target="_blank"><p class="imgxp">到交罚款的sfddsf来的地方</p></a>
</div>
<div id="img5" style="display:none">
<a href="#" title="jfsk" target="_blank"><img src="img/cgwfjbw-index_r2_c14.jpg" width="385" height="276" style="margin-top:3px" /></a>
<a href="#" title="dkf" target="_blank"><p class="imgxp">到交罚款的减肥蒂芬来的地方</p></a>
</div>
<div id="ulhuan">
<ul class="huanul">
<li><a onmouseover="sk(1)"><img src="img/sz1.png" id="liimg1" /></a></li>
<li><a onmouseover="sk(2)"><img src="img/sz_2_2.jpg" id="liimg2" /></a></li>
<li><a onmouseover="sk(3)"><img src="img/sz_3_2.jpg" id="liimg3" /></a></li>
<li><a onmouseover="sk(4)"><img src="img/sz_4_2.jpg" id="liimg4" /></a></li>
<li><a onmouseover="sk(5)"><img src="img/sz_5_2.jpg" id="liimg5" /></a></li>
</ul>
</div>
</div>
第3个回答  2010-10-14
这个我知道,我就在用,一定没问题的。
<DIV class="slider-promo J_Slider" style="HEIGHT: 500px">
<ul>
<li><A style="WIDTH: 750px; HEIGHT: 500px" href="超链接一"><img style="WIDTH: 750px; HEIGHT: 500px" alt="" src="图片一"></A>
<li><A style="WIDTH: 750px; HEIGHT: 500px" href="超链接二" target=blank><img style="WIDTH: 750px; HEIGHT: 500px" alt="" src="图片二"></A>
<li><A style="WIDTH: 750px; HEIGHT: 500px" href="超链接三" target=blank><img style="WIDTH: 750px; HEIGHT: 500px" alt="" src="图片三"></A></li></ul></DIV>

注:1.增加<li></li>可以增加图片
2.style="WIDTH: 750px; HEIGHT: 500px"改图片尺寸
3.建议使用相同尺寸的图片,否则失真。

希望对你有帮助,生意兴隆
第4个回答  2010-10-13
不支持js,肯定弄不了html的,还有flash的,但这个也得要js文件在里面,手动写,最后也得让js来实现,它几秒翻到下一张图片,肯定得用脚本来执行

要不你就放个假的上去。

淘宝HTML图片自动切换有123那些的就是鼠标移到到1就切换到第一次图...
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 l...

网页在淘宝怎么做出鼠标移动切换图片的效果?
<!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> <meta http-equiv="Content-Type" content="text\/html; charset=gb2312"> <title>布丁移动官网j...

淘宝里鼠标放在图片上,图片变亮,这个效果怎么制作(代码是什么)?
这个应该是鼠标放上去图片切换效果(也就是说要两张图片切换)需要在页面中添加以下JS代码:<script language="javascript"> function changeImg(obImg,sNewURL){ if(sNewURL!="") obImg.src=sNewURL;} <\/script> 将需要切换图片的标签代码按照以下示例编写,将以下代码的"图片地址"更换为自己所要...

图片自动切换的JS代码
试试这个图片切换 有12345数字一起切换 鼠标点一下数字会变换到另一张图片,不点就会自动换 里面有教程和源码 参考资料:<a href="http:\/\/www.blueidea.com\/common\/shoutbox\/redir.asp?4=p&id=10895" target="_blank" rel="nofollow noopener">http:\/\/www.blueidea.com\/common\/shoutbox\/redir...

我做了个自动切换的的图片,我想让鼠标指向某一张图片它就不自动切换,然...
做自动切换你只要在ONLOAD里写动态面板状态切换一个,然后在动态面板变化这个动作里写剩下的。移入停止你可以在ONMOUSEENTER的时候显示需切换到的,但貌似这样在AXURE的逻辑运行上可能会有冲突。

我淘宝店里为什么会出现这样的 请替换该图片?点进去又是有图片的!这个...
这个是因为你还没有用相应的新图片去编辑替换掉原来模板中的图片,你点击后只是跳转到一个新的链接,所以图片还是原来的那个图片

求淘宝通栏图片轮播代码,包含js,css,html,类似下图,求各路大神。_百度...
用firefox的 firebug插件查看元素,可以找到css,html的源代码。用js操作动画的代码实现的方式不同。简单的思路:把三张图P到一起,设置成背景,假如每张图width:600px,用JS控制每1500毫秒(1.5秒)width增加600px,当width=1800px 设置width=600。

鼠标移到图片上面会显示出来一堆字母数字,怎么去掉
这个是img的title属性,去掉就没有了,另外alt属性是当你的图片没办法显示的时候,就显示alt里面的内容,所以,最好还是设置一下为好,就描述一下这张图就行了。

哪位大侠可以给几个鼠标移动到文字或者图时显示图片(缩略大图)效果原代 ...
\/\/给创建后的img赋值;(图片路径)smallImg.src = smallImgPath;\/\/通过setAttribute改变大图片的(相对)路径;如果不这么写下面取到的会是绝对路径;smallImg.setAttribute("a1", data[smallImgPath][0]);smallImg.setAttribute("a2", data[smallImgPath][1]);smallImg.onmousemove = function () { \/...

使用图片搬家时提示html代码中没有需要搬家的图片,当把代码复制到装修模...
淘宝的图片搬家只能搬外链的图片 不能使用他人图片空间的图片是说你的数据包的图片存在于别人的淘宝图片空间 所以是无法搬家的 如果你有数据包 可以用大淘营的图片搬家工具 自己处理数据包,处理后将数据包导入助理上传就可以了

相似回答