淘宝HTML图片自动切换有123那些的就是鼠标移到到1就切换到第一次图（必须HTML代码）
由于淘宝只支持HTML代码问下那些店铺在自定义区用HTML代码怎么弄出的图片自动切换我查看源码后都有CALSS类.可是淘宝不支持CSS的.....那为高人来段图片手自动切...
由于淘宝只支持HTML代码问下那些店铺在自定义区用HTML代码怎么弄出的图片自动切换我查看源码后都有CALSS类.可是淘宝不支持CSS的.....那为高人来段图片手自动切换代码必须HTML的.....
展开
5个回答
展开全部
第一种：
把如下代码加入<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的数值，可以得到不同的转换效果哟~~
把如下代码加入<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的数值，可以得到不同的转换效果哟~~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试试这个图片切换
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?5=a&id=10895
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这是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>
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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个我知道，我就在用，一定没问题的。
<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.建议使用相同尺寸的图片，否则失真。
希望对你有帮助，生意兴隆
<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.建议使用相同尺寸的图片，否则失真。
希望对你有帮助，生意兴隆
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不支持js，肯定弄不了html的，还有flash的，但这个也得要js文件在里面，手动写，最后也得让js来实现，它几秒翻到下一张图片，肯定得用脚本来执行
要不你就放个假的上去。
要不你就放个假的上去。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
