文字图片切换效果

1. 怎么做动态文字图片

想制作动态图片，首先需要知道一个概念，那就是帧，一张动态图片是有许多的帧组成的，一个帧就是一张图片，每张图片都稍有不同，连接着快速切换，便形成了动态效果。
动态图片的制作其实并不需要重复的制作每一个帧，我们可以只制作第一个和最后一个，然后采用过渡效果，就能很好的制作出一个动态图片。
下面的制作过程、制作方法、制作思路是我从网上学习得到，但找不到原作者，但图片是我自己制作的，所以就算是我原创的吧，下面教程开始，看仔细了哦！
END
动态图教程
1
第一步是打开PS软件，在软件界面点击文件--新建，出现如下界面，宽和高可以自己根据需要设定，背景色可以没有，也可以设置为任何颜色；一切设置好后，点击确定就创建好了一个新的图片。

2
我们在左侧工具栏略靠下方的位置选择文字工具，然后在右侧图片上按下鼠标左键，拖出一块文字区域，写入文字，我这里为大家举例写的“网络经验，分享让生活更简单”，这里注意，文字的颜色在最上方工具条上点击更改，我的文字颜色黑色不好，最后就是选中文字，点击上方的文字颜色进行了更改。

3
文字输入完成，下面我们进入下一个环节，新建一个图层，在这个图层上添加颜色，我这里的动态图的“动”主要是提现在颜色的变动上，形状的变动没有涉及。
新建图层的方法是点击右下角的文件图标。

图层新建好了，添加颜色。点击左侧工具栏的渐变色图标，出现如图界面，点击上方的小三角，选择一个渐变的模式，我这里选择的图谱色带。选择不同的渐变模式效果有很大差别，有点广告中文字从右到左闪亮一下，用的就是白色到透明模式，这里不再多说了，大家底下可以自己试试。

选择好模式了，我们用鼠标从左到右拉出一条线，松开左键就会出现图片上的彩虹效果。

我们做的动态效果是让文字的颜色一直按色谱变换，这个到底是怎么变换的呢，下面可是重点了：
将鼠标切换到选择状态，将图片拖动到最左侧。
后面的帧中让此图片一点一点的向右侧移动，通过文字蒙版的效果，文字的颜色显示的就是文字上方对应的图片部位的颜色，图片一直移动，所以文字的颜色也就看起来是一直变换的了。

因为要用到帧，这里调出时间轴，如图点击窗口--时间轴，点击后工作区下方即会出现横条时间轴。

点击时间轴上的新建按钮，新建出第二个帧，图上大家可以看到，我就“永远”圈了起来，这个是什么意思呢，这个指的是图片循环播放的次数，永远即指的是一直循环播放下去，当然大家也可以选择播放几次后停止。

上一步骤新建出了第二个帧，选中第二个帧，在上面的工作区将色谱图片向右移动，移动到一个适当的位置，比如将色谱图片整体移动到最右侧，只露出左边缘，下图有一定的干扰作用，大家不要全按照我的来哦，可以先随便放个位置，一会添加过渡后再返回来调整。

这里就是添加过渡效果了，点击图中所示的图标，设置相应的过渡帧数，这里我试验了几次，建议帧数多于20个，少的话动作会显得太快。

上面的步骤操作完成，下一个重点又来了，创建剪切蒙版。
选中色谱的图层，在其上右击，选择创建剪切蒙版，此时文字的颜色就会变成对应色谱部位的颜色。为什么之前不先创建剪切蒙版呢，大家可能会这样问，这样做是为了方便调整色谱图层，因为设置了这个效果之后色谱就看不到了，不利于之前拖动色谱的操作。

好了，到这一步就大功告成了，点击最下方的播放三角箭头试试效果如何吧，如果不满意就返回调整，回到第9步重新操作；如果感觉很好了，那就点击保存动态图吧，如图，点击文件--保存为web格式的文件。

在如下界面点击保存就ok了，学完这个操作，PS的界面操作你也就基本没什么大问题了。赶紧换别的效果试试吧！

2. 图片上有文字的轮播怎样实现点击圆点切换图片时文字不重叠

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法。分享给大家供大家参考。具体如下：

运行效果如下：

完整实例代码点击此处本站下载。

使用方法案例:

?

1 2 3 4 5 6 7 <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js"></script> <script> $('.carousel-image').CarouselImage({ num :$('.carousel-num') }); </script>

或者requirejs：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <div class="carousel-image"> <div> <a> <img src="http://www.yoursiteweb.com/images/1430073193462.jpg"/> </a> <a> <img src="http://www.yoursiteweb.com/images/1430073252953.png"/> </a> <a> <img src="http://www.yoursiteweb.com/images/1430073111420.jpg"/> </a> </div> <div class="carousel-num"> </div> </div> <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/require.js"></script> <script> requirejs.config({ //By default load any mole IDs from js/lib baseUrl: '../src', paths: { $: 'zepto' } }); require(['carousel-image',"$"], function(CarouselImage,$) { var cs = new CarouselImage(); cs.init({ target:$('.carousel-image'), num:$('.carousel-num') }); }); </script>

API 属性、方法及回调：

target:

表示是在这个容器内的元素会触发事件,它应该有个子级的容器，方便动画的优化

num:

本意是以显示当前索引的数字表示，但现在用样式把数字隐藏了，如果要显示数字样式，可自行更改样式文件

希望本文所述对大家的javascript程序设计有所帮助。

3. js图片+文字切换

下面是我写过的js类似flash的全码:调用完全类同于flash

<script>
//-----WNum 为图片宽度
//-----HNum 为图片高度
//-----TNum 为文字高度(可为空 ,即不显示)
function go_Img(WNum,HNum,TNum){
Go_Num=(imgUrl.length-1);key=0;adNum=0;theTimer='';
var C_lass;
var $=function $(str){return document.write(str);};
var C_ss="<style>";
C_ss=C_ss+"div{overflow:hidden;}";
C_ss=C_ss+".W_Ord{overflow;hidden;text-align:center;color:#F00;font-weight:bold;clear:both;width:"+WNum+"px;height:"+TNum+";background-color:#eee;}";
C_ss=C_ss+".Min_On{color:#fff;Float:right;background-color:#f00;cursor:pointer;width:30px;height:20px;padding-top:1px;border:1px solid #f60;text-align:center;font-weight:bold;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;}";
C_ss=C_ss+".Min_Off{color:#fff;Float:right;cursor:pointer;width:30px;height:20px;padding-top:1px;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;text-align:center;font-weight:bold;}";
C_ss=C_ss+"</style>";
$(C_ss);C_ss='';
$("<Div style='width:"+WNum+"px;height:"+HNum+"px;border:1px solid #eee;'>");
$("<div style='width:"+WNum+"px;height:"+HNum+"px;'><img style='Cursor:Pointer;Filter:revealTrans(ration=2,transition=12);width:"+WNum+"px;height:"+HNum+"px;' src='"+imgUrl[1]+"' name=imgInit onclick=go_Url();></Div>");
$("<div class='Rig' style='width:"+WNum+"px;height:20px;margin-top:-20px;'>");
for (var i=100;i>0 ;i=i-2){
$("<Div style='float:right;width:4px;height:20px;background-color:#000;filter:alpha(opacity="+i/2+");-moz-opacity:0."+i/20+";opacity: 0."+i/20+"; '></Div>");
}
$("</Div>");
$("<Div class='Rig' style='width:"+WNum+"px;height:"+HNum+"px;margin-top:-20px;'>");
for (var j=Go_Num;j>0 ;j--){
if (j==1){C_lass='Min_On';}else{C_lass='Min_Off';}
$("<Div Id='Min"+j+"' class='"+C_lass+"' onmouseover=nextAd("+j+");>"+j+"</Div>");
}
$("</Div>");
$("</Div>");
if (TNum && TNum!=''){
$("<Div Id='W_Ord' class='W_Ord'>"+imgWord[1]+"</Div>");
}
nextAd(1);
}
function nextAd(GetNum){
var O=function O(objid){return document.getElementById(objid);}
adNum=adNum%Go_Num;
adNum++ ;
if(GetNum!=undefined && GetNum!=0){adNum=GetNum;}
if(key==0){key=1;}
else if(document.all){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
imgInit.filters.revealTrans.play();
if (document.all.W_Ord!=undefined){document.all.W_Ord.innerHTML=imgWord[adNum];}
for (var i=1;i<(Go_Num+1);i++ ){O('Min'+i).className='Min_Off';}
O('Min'+adNum).className='Min_On';
}
document.images.imgInit.src=imgUrl[adNum];
if (GetNum==undefined){theTimer=setTimeout(nextAd, 6000);}
else{clearTimeout(theTimer);theTimer=setTimeout(nextAd, 6000);}
}
function go_Url(jumpTarget){
jumpUrl=imgLink[adNum];
jumpTarget='_blank'; //_blank
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>

<script>
//-------建产数组
var imgUrl=new Array();
var imgLink=new Array();
var imgWord=new Array();
imgUrl[1]='http://hfxhyy.35hf.cn/back/UpPic/8vzrlf5v1czut.jpg';
imgLink[1]='http://hfxhyy.35hf.cn/Object.asp?StrId=20';
imgWord[1]='Six信息';
imgUrl[2]='http://hfxhyy.35hf.cn/back/UpPic/q6hxyzon6by4b.jpg';
imgLink[2]='http://hfxhyy.35hf.cn/Object.asp?StrId=18';
imgWord[2]='Five';
imgUrl[3]='http://hfxhyy.35hf.cn/back/UpPic/kdiqte-0rune7.jpg';
imgLink[3]='/Object.asp?StrId=17';
imgWord[3]='Four';
imgUrl[4]='http://hfxhyy.35hf.cn/back/UpPic/mrocr4k8v1f40.jpg';
imgLink[4]='http://hfxhyy.35hf.cn/Object.asp?StrId=16';
imgWord[4]='Three';
imgUrl[5]='http://hfxhyy.35hf.cn/back/UpPic/rsba4jy1m7mf6.jpg';
imgLink[5]='http://hfxhyy.35hf.cn/Object.asp?StrId=15';
imgWord[5]='Two';
imgUrl[6]='http://hfxhyy.35hf.cn/back/UpPic/ttqnfeij7_d8p.jpg';
imgLink[6]='http://hfxhyy.35hf.cn/Object.asp?StrId=14';
imgWord[6]='one';

// 调用方法
go_Img(290,205,20); //-----------------------------调用方法
</script>