淘宝HTML图片自动切换有123那些的就是鼠标移到到1就切换到第一次图（必须HTML代码）
作者&投稿：丛褚 （若有异议请与网页底部的电邮联系）
那种效果叫做图片轮播，除了html肯定还要用到脚本的，如果你不会脚本编程，可以用Dreamweaver做出鼠标经过的效果（就是鼠标移上去就换张图片！在DW的：插入-图像对象-鼠标经过图像），要自动切换就要另外写代码了，或者你可以用flash代替图片达到这样的效果，或者你可以到“懒人图库”去参考别人的特效！
function changeImg()
{
var r=Math.ceil(Math.random()*8); //产生1-8的随机数
document.getElementById("myImg").src="img/"+r+".jpg";
setTimeout("changeImg()",1000);
}
把如下代码加入<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数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
这是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>
这个我知道，我就在用，一定没问题的。
<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来实现，它几秒翻到下一张图片，肯定得用脚本来执行
要不你就放个假的上去。
怎么用ps制作阿里巴巴宝贝详情源代码、HTML文件
这步就可以进行存储了，基本要存储两种格式，一种是gif格式及HTML格式的，保存到指定路径，确定就好了。其它的基本不用去设置。存储好后打开你存储好的文件，双击—这时就会自动跳转进入浏览器，这时右击鼠标—查看网页源代码 。复制下来，打开office Word，粘贴上去。（使用Word会分辨出超链接地址图片地址，...
淘宝首页展示图怎么下载?方法介绍
1. 通过手机淘宝APP: 打开手机淘宝，登录后，进入“我的”>“我的店铺”，选择所需商品，点击进入详情，点击“编辑”按钮，进入图片管理页面，下载主图。2. 电脑网页版淘宝: 登录淘宝网页版，进入“卖家中心”>“宝贝管理”，选择商品后点击“编辑宝贝”，同样进入图片管理页面下载。3. 第三方工具下载...
PS切片好的html文件的代码放到淘宝宝贝描述页,图片为什么显示不出来...
前提是您要将需要显示切片都放在图片空间中，然后将需要显示的图片链接复制下来，粘贴在上面的“图片位置”的地方就可以了。
不用学设计啦!用AI神器自动做海报!
AI设计与绘画工具太强大了,简单输入文字,就能生成想要的图像!做海报、封面图、手机壁纸等等,用这些AI神器真的很轻松!想自己做海报、封面图的宝子千万不要错过!不需要花钱找设计师,不需要学设计软件,用下面这些AI神器,轻松生成你想要的海报! Fy! Studio。创意绘画Al,输入描述,自动为你生成为海报、插画 Stocklmg ...
怎么在淘宝详情页插入一张图片可以有链接的
点击“插入图片”按钮，如图：2. 在“宝贝详情”弹出的窗口，选“上传新图片”，如图：3. 点击底部的“添加图片”，如图：4. 在弹出的窗口，选中要添加的图片，点击“打开”，如图：5. 等图片自动上传后，点击“插入”-“完成”，这样，图片就插入到“宝贝详情”里面啦。如图：6.选中刚才插入的图片...
淘宝图片支持什么格式
问题一：往淘宝网上传图片需要什么格式的 怎么弄 淘宝对上传图片的相关要求如下：1. 图片单张大小支持3M以下, 超过系统会自动压缩；2. 自动压缩和宽度调整可能会使图片失真；3. 支持的图片格式: jpg、jpeg、png、gif；4. Mac电脑请罚用通用上传。问题二：在淘宝上传宝贝照片时得用什么格式的图片？
淘宝手机详情页一键生成
甩手工具箱支持从商品描述内容中获取合适的图片，一键生成合适手机详情图片，可以提高手机上的浏览量，同时，甩手工具箱会自动判断总图片是否超过大小，如果总大小超过1.5M，则后面的图片会自动放弃。不用手动来一张一张删除多余的图片的，非常方便快捷。甩手工具箱能在抓取宝贝商品制作数据包的同时，批量制作...
建站宝盒的H5响应式和我们说的自适应有什么区别?
2、自适应布局可以让设计更加可控，因为它只需要考虑几种状态就可以了 虽然响应式\/自适应网页设计会带来兼容各种设备工作量大、代码累赘、加载时间长的缺点，但它们能“一次设计，普遍适用”，可以根据屏幕分辨率自适应以及自动缩放图片、自动调整布局，它们不只是技术的实现，更多的是对于设计的全新思维模式。
为什么充电宝会自动断电?
1. 充电宝在使用过程中，会出现充一会儿后自动停止供电的现象，需要重新按下开关才能继续充电，一会儿又再次停止供电，这让用户感到非常困扰。2. 充电宝的接头因为多次使用拔插，可能会导致接头松动，使得手机或充电座无法正常连接。为了解决这个问题，需要晃动充电宝以使充电指示灯正常工作。3. 充电宝在为...
淘宝的图片空间引用图片被删除。在回收站还原还会自动回到宝贝...
淘宝的图片空间引用图片被删除，需要在回收站还原，还原后会图片会自动回到宝贝描述。需要注意的是，根据淘宝图片空间的提示：淘宝图片删除后，会在淘宝图片空间回收站保留7天。如果7天之内没有做还原操作，就会被永久删除。
融莲万通： 试试这个图片切换 有12345数字一起切换 鼠标点一下数字会变换到另一张图片,不点就会自动换 里面有教程和源码
新宁县17551586706： 我做html网页时 插入了个跳转的图片网页 他上面有1234的按钮切换图片 那么修改按钮位置啊什么的是在哪里啊 - ？
融莲万通： 试试这个图片切换 有12345数字一起切换 鼠标点一下数字会变换到另一张图片,不点就会自动换 里面有教程和源码
新宁县17551586706： 求HTML图片自动切换代码,有123那种? - ？
融莲万通： 那是js.给你个网址 你去看看 这中代码在网上很多的.你搜 js图片切换 就有了.http://js.alixixi.com/a/2016346262834.shtml
新宁县17551586706： 淘宝上怎样用html代码实现轮播 - ？
融莲万通： 试试这个图片轮播 有12345数字一起切换 鼠标点一下数字会变换到另一张图片,不点就会自动换 里面有教程和源码
新宁县17551586706： HTML图片自动切换代码 ,,,有123那些的,,,就是鼠标移到到1就切换到第一次图(图片是自己本地电脑上的)哪位高手用dreamweave8写下代码参考参考...谢了？
融莲万通： 这个是用js完成的,但是现在的话你可以去网上找jquery的插件直接完成,你要的话加我Q821039485,我有类似的代码
新宁县17551586706： 求1段HTML 代码 图片自动切换 下面有按钮1 ,2, 3 点图片可以自己设置链接？
融莲万通： 网页的源代码,从菜单栏里的查看就能察看此网页的源代码,就是html代码了~~~~ 就是同样的,在那个源代码的记事本文档里,在菜单里的“编辑”,选“查找”,查找所有“img src”的字段,就是图片的源代码了~~~~~
新宁县17551586706： 淘宝店铺首页上的那几张大图怎么设置成轮番播放 下面有123.我用的是扶植版的店铺能设置吗 - ？
融莲万通： 也是可以做的.一、首先要寻找素材,就是要播放的图片,轮播的图片像素是750*300的.所以必须用工具把他裁剪成这样的大小,最好的软件就是ps了,但是我的水平确实有限,在这里就不做详细介绍了.二、图片做好了,就要把他上传到图片空间了,因为淘宝不支持本地的图片的,必须找一个支持外联的空间把他存放起来,一钻一下淘宝的图片空间是免费用的.好了把图片上传来之后,复制连接,然后打开图片轮播代码.在图片地址和连接地址处都换成你自己的连接,然后记得保存哦.三、进入店铺装修,点自定义区域,不能直接复制,一定要切换到代码编辑模式之后在粘贴.粘贴之后点保存,然后发布,看看效果吧,是不是几张图片在轮换播放啊.嘻嘻,成功了.
新宁县17551586706： HTML中图片自动切换一定要用js吗? - ？
融莲万通： 是的HTML中图片自动切换不一定要用js, 也可以使用 flash ..
新宁县17551586706： 如何在淘宝中做个图片轮播呢?？
融莲万通： <p>试试这个图片切换</p> <p>有12345数字一起切换</p> <p>鼠标点一下数字会变换到另一张图片,不点就会自动换</p> <p>里面有教程和源码</p> <p></p>
新宁县17551586706： 淘宝图片轮播制作 - ？
融莲万通： <div class=＂box＂> <div class=＂shop-slider＂> <div class=＂bd＂> <div style=＂WIDTH: 340px; HEIGHT: 175px＂ class=＂slider-promo J_Slider tb-slide＂> <ul style=＂HEIGHT: 175px＂> <li><a href=＂在这里加入宝贝的超级链接＂ target=＂_...
