小城盱眙网

标题: Web前端必须学会的简单技能：图片重叠换位切换特效 [打印本页]

作者: ohnoma 时间: 2016-7-12 10:49
标题: Web前端必须学会的简单技能：图片重叠换位切换特效

一款jQuery图片重叠换位滑动切换网页特效，jQuery五图展示酷炫特效代码，鼠标滑过当前图片与前置图片动画滑动交换位置图片展示JS代码。图片重叠换位切换特效是学习web 前端课程必须学会的技能哦，一般培训机构都会讲解的一个案例。下面跟着海文IT教育一起来学习吧。

使用方法：

1、调用CSS样式：
<link rel="stylesheet" type="text/css"href="css/style.css" />
2、调用JS插件代码：
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
3、添加HTML代码：
将......之间的html和js代码；放在<body></body>之间。

图片重叠换位切换特效代码

<scriptlanguage="JavaScript">

var imgUrl=new Array();

var imgLink=new Array();

var imgText=new Array();

var picNum=0;

imgUrl[1]="图片地址一";

imgLink[1]="链接1";

imgText[1]="标题或简介或其它HTML内容1";

imgUrl[2]="图片地址二";

imgLink[2]="链接2";

imgText[2]="标题或简介或其它HTML内容2";

imgUrl[3]="图片地址三";

imgLink[3]="链接3";

imgText[3]="标题或简介或其它HTML内容3";

imgUrl[4]="图片地址四";

imgLink[4]="链接4";

imgText[4]="标题或简介或其它HTML内容4";

imgUrl[5]="图片地址五";

imgLink[5]="链接5";

imgText[5]="标题或简介或其它HTML内容5";

function NextPic(){

if(picNum<4) picNum++ ;//显示4个图片

else picNum=1;

if (document.all){

//下面注意，如果存在于FORM表单中，需要使用下面的方法，否则可直接使用name。

document.imgInit.filters.revealTrans.Transition=Math.floor(Math.random()*23);

document.imgInit.filters.revealTrans.apply();

document.imgInit.filters.revealTrans.play();

}

document.images.imgInit.src=imgUrl[picNum];

//如果不是图片，而是SWF等，可做判断，内容可在程序中做好，再放于下面。

focustext.innerHTML='<a href='+imgLink[picNum]+' target=_blank>'+imgText[picNum]+'</a>';

//设置翻页时间

theTimer=setTimeout('NextPic()', 3000);

}

function goUrl(){

window.open(imgLink[picNum],'_blank');

}

</script>

HTML代码中：

可以做到控件中

<TABLE cellPadding=0 width=100%border=0>

<TR>

<TD align=middle height="140" >

<div align='center'>

<a href='javascript:goUrl()'><imgstyle="FILTER: revealTrans(duration=2,Transition=5)"src="javascript:NextPic()" width="170"height="120" border="1" id=imgInit name=imgInit></a></TD></TR>

<TR><TD align=middleheight="38" ><div name=focustext id=focustextalign='center'></div>

</div>

</TD></TR></TABLE>

如果想看这段视频，可以到百度传课或者腾讯课堂搜索海文IT教育观看我们的免费视频哦，讲解详细，学起来更简单哦。

更多精彩课程尽在上海海文信息技术有限公司，http://www.oracleoaec.net/。

欢迎光临小城盱眙网 (http://www.xcxy.net/)

Powered by Discuz! X3.2