淘宝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="_...