简洁的左右切换焦点图代码(怎么切换焦点)
admin 发布:2022-12-19 10:48 81
本篇文章给大家谈谈简洁的左右切换焦点图代码,以及怎么切换焦点对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
左右箭头翻页焦点图js代码 不要flash的
""body{margin:0;padding:0;font-size:12px;color:#666;background:#ccc;} img{border:none;} a{text-decoration:none;color:#666;font-size:12px;} #box{margin:100px auto;width:450px;height:280px;background:#6666cc;overflow:hidden; position:relative;border:6px solid #ddd;} #box #img{width:1820px;height:280px;display:block;overflow:hidden;background:#fff;} #box #img a{float:left;width:450px;height:280px;display:block;overflow:hidden;} #box #num{position:absolute;left:340px;top:250px;} #box #num a{width:18px;height:18px;display:block;text-align:center;line-height:18px;float:left;margin-left:5px;background:#ddd;filter:alpha(opacity=40);opacity:0.4;overflow:hidden;} #box #num a:hover,#box #num a.hover{opacity:0.9;filter:alpha(opacity=90);background:#fff;color:#3399ff;}1 2 3 4src="" / src="" /D2/pic/item/8bbc98c088041f843bdb4960.jpg" target="_blank"
" /function S$(i){return document.getElementById(i)} function S$$(e,p){return p.getElementsByTagName(e)}var slideImage=function(){var d,s,da,sa,st=10,w,sp,acls,MID,AID,isAuto=1,dir=1,lst=0,pos,cur=0,A,C,t=800,k=0,at=3000; return{ init:function(dst,src,width,time,interval,aclass){ w=width;st=interval;t=time/st;acls=aclass; d=S$(dst); da=S$$("a",d); s=S$(src); sa=S$$("a",s); d.onmouseover=function(){clearInterval(AID);}; d.onmouseout=function(){AID=setInterval("slideImage.autoplay()",at);}; AID=setInterval("slideImage.autoplay()",at); for(var i=0;isa[i].onmouseover=function(){ j=0;while(jclearInterval(AID);slideImage.slide(j-1); }; sa[i].onmouseout=function(){AID=setInterval("slideImage.autoplay()",at);}; } }, slide:function(i){ if(i!=lst){ sa[lst].className="";sa[i].className=acls; lst=i;cur=i; C=-i*w; A=(-C+parseInt(d.style.marginLeft))/t/t/t;k=0; clearInterval(MID);MID=setInterval(function(){slideImage.mv();},st); } }, mv:function(){ sp=A*Math.abs(Math.pow(k-t,3)); if(Math.abs(sp)d.style.marginLeft=sp+C;k++; }, autoplay:function(){ if(cur==3)dir=-1;if(cur==0)dir=1; this.slide(cur+dir); } } }();
高分悬赏计算机达人,求图片切换代码
下面是代码,换图修改
//slideimages数组为变换的图
var slideimages=new Array();
slideimages[0]="images/ad-01.jpg";
slideimages[1]="images/ad-02.jpg";
slideimages[2]="images/ad-03.jpg";
slideimages[3]="images/ad-04.jpg";
slideimages[4]="images/ad-05.jpg";
文字修改
//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="焦点图片广告011111";
slidetext[1]="焦点图片广告022222";
slidetext[2]="焦点图片广告033333";
slidetext[3]="焦点图片广告044444";
slidetext[4]="焦点图片广告055555";
链接修改
//slidetext数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]="";
slidelinks[1]="";
slidelinks[2]="";
slidelinks[3]="";
slidelinks[4]="";
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
!-- saved from url=(0055) --
HTMLHEADTITLE无标题文档/TITLE
META http-equiv=Content-Type content="text/html; charset=gb2312"
STYLE type=text/cssBODY {
TEXT-ALIGN: center
}
TD {
FONT-SIZE: 12px
}
#textslide {
COLOR: #333333
}
/STYLE
META content="MSHTML 6.00.6000.16825" name=GENERATOR/HEAD
BODY
TABLE cellSpacing=0 cellPadding=0 width=325 border=0
TBODY
TR vAlign=top
TD colSpan=3A onmouseover=tu_ove() style="CURSOR: hand"
onclick=gotoshow() onmouseout=ou()IMG height=190 src="images/ad-01.jpg"
width=325 border=0 name=slide/A/TD/TR
TR
TD class=white align=middle width=229 bgColor=#f4f4f4 height=19/TD
TD width=1 bgColor=#7c7c7c
DIV style="POSITION: relative"
DIV style="POSITION: absolute; TOP: 10px"
TABLE cellSpacing=0 cellPadding=0 width=95 border=0
TBODY
TR vAlign=top align=middle
TD width=19 height=0
DIV style="POSITION: relative"
DIV id=xiaotu1
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan1
height=3 src="images/bian1.gif" width=10 border=0/DIV/DIV/TD
TD width=19 height=0
DIV style="POSITION: relative"
DIV id=xiaotu2
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan2
height=3 src="images/bian1.gif" width=10/DIV/DIV/TD
TD width=19 height=0
DIV style="POSITION: relative"
DIV id=xiaotu3
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan3
height=3 src="images/bian1.gif" width=10/DIV/DIV/TD
TD width=19 height=0
DIV style="POSITION: relative"
DIV id=xiaotu4
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan4
height=3 src="images/bian1.gif" width=10/DIV/DIV/TD
TD width=19 height=0
DIV style="LEFT: 1px; POSITION: relative"
DIV id=xiaotu5
style="LEFT: 0px; POSITION: absolute; TOP: -19px"IMG id=xiaosan5
height=3 src="images/bian1.gif"
width=10/DIV/DIV/TD/TR/TBODY/TABLE/DIV/DIV/TD
TD width=95 height=19
TABLE cellSpacing=0 cellPadding=0 width=95 border=0
TBODY
TR vAlign=top
TD class=homejdboder width=19 height=19A onmouseover=ove(0)
style="CURSOR: hand" onmouseout=ou()IMG height=19
src="images/1.gif" width=19 border=0/A/TD
TD class=homejdboder width=19 height=19A onmouseover=ove(1)
style="CURSOR: hand" onmouseout=ou()IMG height=19
src="images/2.gif" width=19 border=0/A/TD
TD class=homejdboder width=19 height=19A onmouseover=ove(2)
style="CURSOR: hand" onmouseout=ou()IMG height=19
src="images/3.gif" width=19 border=0/A/TD
TD class=homejdboder width=19 height=19A onmouseover=ove(3)
style="CURSOR: hand" onmouseout=ou()IMG height=19
src="images/4.gif" width=19 border=0/A/TD
TD width=19 height=19A onmouseover=ove(4) style="CURSOR: hand"
onmouseout=ou()IMG height=19 src="images/5.gif" width=19
border=0/A/TD/TR/TBODY/TABLE/TD/TRtrtd colspan="3"
DIV id=textslide焦点图标题层/DIV/td/tr/TBODY/TABLE
SCRIPT
//slideimages数组为变换的图
var slideimages=new Array();
slideimages[0]="images/ad-01.jpg";
slideimages[1]="images/ad-02.jpg";
slideimages[2]="images/ad-03.jpg";
slideimages[3]="images/ad-04.jpg";
slideimages[4]="images/ad-05.jpg";
//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="焦点图片广告011111";
slidetext[1]="焦点图片广告022222";
slidetext[2]="焦点图片广告033333";
slidetext[3]="焦点图片广告044444";
slidetext[4]="焦点图片广告055555";
//slidetext数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]="";
slidelinks[1]="";
slidelinks[2]="";
slidelinks[3]="";
slidelinks[4]="";
//焦点图初始内容--start
var slidespeed=3000
var slidesanjiaoimages=new Array("images/bian2.gif","images/bian1.gif");
var slidesanjiaoimagesname=new Array("xiaosan1","xiaosan2","xiaosan3","xiaosan4","xiaosan5");
var filterArray=new Array();
filterArray[0]="progid:DXImageTransform.Microsoft.Pixelate (enabled=false,duration=2,maxSquare=25 )";
filterArray[1]="progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSH)";
filterArray[2]="progid:DXImageTransform.Microsoft.Stretch(duration=1)";
filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)";
filterArray[4]="progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )";
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;islideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function tu_ove(){clearTimeout(setID)}
function ou(){slideit()}
var whichlink=0
var whichimage=0
function gotoshow(){
window.open(slidelinks[whichlink]);
}
function slideit(){
document.images.slide.style.filter=filterArray[whichimage];
//alert(document.images.slide.style.filter);
pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000) : 0
//alert(pixeldelay);
if (!document.images) return
if (ie55) {
document.images.slide.filters[0].apply();
document.images.slide.filters[0].play();
}
document.images.slide.src=imageholder[whichimage].src
document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimageslideimages.length-1)? whichimage+1 : 0
setID=setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
function ove(n){
clearTimeout(setID)
whichimage=n;
document.images.slide.src=imageholder[whichimage].src
document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
}
/SCRIPT
/BODY/HTML
关于焦点图的JQuery代码,切换问题
能否提供一下这段代码所依附的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/DIVIMG 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','','')
zhuanti[2]=new ztstr('2','','')
zhuanti[3]=new ztstr('3','','')
zhuanti[4]=new ztstr('4','','')
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(nnimgcount) 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(tt1) 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=spacewidthdmheight=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="" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(duration=2.0,transition=12)"/a
好,到这里就大功告成了。另外,试试改变transition的数值,可以得到不同的转换效果哟~~
关于简洁的左右切换焦点图代码和怎么切换焦点的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-19百度浏览器,百度浏览器历史记录怎么恢复
- 05-19怎么免费创建网站,怎么免费创建自己的网站平台
- 05-19现在的网络推广怎么做,网络怎样做推广
- 05-19怎么在百度上发帖推广,免费百度广告怎么投放
- 05-19网站如何优化一个关键词,怎么优化一个网站关键词
- 05-19网络营销方案策划案例,网络营销方案策划案例怎么写
- 05-19网络推广怎么找客户资源,怎么在网络推广
- 05-19怎么做网站,怎么做网站教程视频
- 05-19搜索关键词,word文档怎么搜索关键词
- 05-19怎么免费创建自己的网站,怎么免费创建自己的网站平台
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接