学习jquery基础知识，第五课（制作单个图片更换实例）下
我们接着上节课的内容，继续说吧~
首先我们回到HTML文档里把显示代码贴到最后先！这个是调用代码！放到页面最末端就可以了~
- <script type="text/javascript">
- $(function(){
- photolink('img',1,1000);
- });
- </script>
这里我们使用一个显示jquery的代码然后我们用调用自定义函数的方式把预先参数写好~
参数分析如下：
photolink这个是我指定函数的函数名；
img就是name里的名字，和ID里的开始参数相同~这个做法有效避免了和CLASS相冲突还可以自行加样式进去喔~不过我们这里只想达到效果所以直接使用原有的img命名就可以~
第一个数字参数1，就是设置首先显示那个~从那个开始显示~以后的就是循环啦~
第二个数字参数1000，就是显示的每个图片的显示时间~就是说明显示多久会自动转换图片！以毫秒计算的~1000毫秒=1秒
////////////////////////////////jquery-dome-01.js//////////////////////////////
- //好了万事都准备好了~现在就欠东风了~我们一步步在jquery-dome-01.js文档里编写我们的内容啦~
- function photolink(name,setno,times){
- //第一句就是把原来的定义函数换个形式重新写一次，并获取对应的参数。
- var name;var setno;var times;
- //这个就是预先在自定义函数里把获取活来的参数重新定义。
- $("a[name="+name+"]").hide();//这个就是初始化所有name是获取参数跟name参数一样的超链接全部隐藏
- //我们在这里查看一下firebug会看到，实际上这个动作是把所以符合的超链接里加了CSS参数使他做到隐藏的~
- $("#"+name+setno).show();
- //这个就是独立把预先设置好的ID小类显示出来，上面我们设置了1的参数，那么这里我们实际运行是的结果就是$("#img1").show();运行时就会是这样了~
- //这都是初始化处理
- var num=$("a[name="+name+"]").length
- //获取组别里的所有参数总数，用来后面循环使用~
- //好了所有东西都准备好，那么我们可以开始写动作部分了~
- function timeload(x,num){
- //因为需要显示时有停顿时间，所以我把动作分了出来~,x参数是用于的带初次显示的是谁，所以设置的。
- //num就是给这个自定义有多少个项目需要循环
- setTimeout(function(){
- //这里我使用setTimeout,因为setTimeout实际上是延迟运行时间，也就是说他的作用是延迟一次运行我们这里其实可以使用setInterval函数，那为什么不用呢？是因为如果用setInterval的话，浏览器有可能会出现崩溃的~也就是说运行到一定时间有可能会自动关闭，死掉了~所以不建议用setInterval。
- $("a[name="+name+"]").hide();
- //跟外面的动作查不多，首先全部隐藏所有符合格式的东东~
- $("#"+name+x).show();
- //这里就获取显示的参数，究竟该到那个显示。
- timeload(x,num);
- //这里就是重复运行了~重新执行一次这里函数，另到他循环起来~
- },times);
- //这个就是外面设置的时间了~显示多久后转图。
- if(x==num){x=1;}else{x=x+1;};
- //判断，防止图片显示超出预设值范围
- };
- timeload(setno,num);
- //这个就是使用上面的自定义函数，并代入photlink里获取的参数加到timeload函数里
- };
- //这样你运行测试一下，我们第一个作品就做好了~最好测试使用firebug，开着那个HTML的东东可以看到每次运行时的情况~也可以更好理解我们的程序的工作原理~
