之前有朋友问我,怎么实现手动图片轮播的方法。
当时,觉得是挺简单的一件事情,用Jquery的UI就可以轻松做到。不过,后来朋友说要放在wordpress的博客里经常调用,这就麻烦了。
虽然说,对方有管理员权限,在文章里放js不会做过滤。但是,长长的代码对于他而言并不是非常友好的解决方案。况且,对于图片的大小、数量、文字描述都不确定。
所以,我想到了用函数去封装这个功能。
初稿是这样的,虽然是10行不到的代码,却折腾了30多分钟。先看代码,30分钟的原因在下方:
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 | <script type="text/javascript"> function show_gaoda_img(b,a){ document.write('<div class="show_gaoda_img_btn_box">'); for (i=0; i<a .length; i++){ document.write('<a href="#" onclick="document.images[\''+b+'\'].src=(\''+a[i].Url+'\')" >'+a[i].Name+'</a>'); }; document.write('</div>'); document.write('<div class="show_gaoda_img_img_box"><img src="'+a[0].Url+'" name="'+b+'" /></div>'); }; var Arr_gaoda_001=[]; Arr_gaoda_001.push( {Url:"http://www.mahq.net/mecha/gundam/msgundam/ms-06s-char.jpg",Name:"前"}, {Url:"http://t.douban.com/pics/logosmall.gif",Name:"后"}, {Url:"http://www.baidu.com/img/logo-yy.gif",Name:"左"}, {Url:"http://www.baidu.com/img/logo-yy.gif",Name:"左"} ); show_gaoda_img("Arr_gaoda_001",Arr_gaoda_001); </script> |
如果你细心,应该会发现最后调用函数的时候重复了两次数组名字,
show_gaoda_img(“Arr_gaoda_001”,Arr_gaoda_001);
这么做的原因出于无奈(或者没有想到更好的办法)。
当函数show_gaoda_img被调用的时候,将获得两个b,a两个值 ,他们分别得到字符串形态的数组名称,以及数组本身。重复的原因就在于此,我突然发现,一个数组自身的名字不能以字符串呈现,虽然可以写硬编码,但是如果数组是不确定名称的,那就势必很麻烦。
于是,有了另一种思路,如果把数组的名字写死,那么或许就可以解决问题了(可以用硬编码)。不确定的主题分割用数组中的tag标签去区分。
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 34 35 36 37 | <script type="text/javascript"> //建立一个全局的特定数组 var Arr_gaoda_img=[]; function show_gaoda_img(a){ document.write('<div class="show_gaoda_img_btn_box">'); //枚举所有符合Tag的内容 for (i=0; i<arr_gaoda_img .length; i++){ document.write(Arr_gaoda_img[i].Tag); if (Arr_gaoda_img[i].Tag==a){ document.write('<a href="#" onclick="document.images[\''+a+'\'].src=(\''+Arr_gaoda_img[i].Url+'\')" >'+Arr_gaoda_img[i].Name+''); }; }; document.write('</arr_gaoda_img></div>'); //读取第一张符合Tag的图片 for (i=0; i<arr_gaoda_img .length; i++){ if (Arr_gaoda_img[i].Tag==a){ document.write('<div class="show_gaoda_img_img_box"><img src="'+Arr_gaoda_img[i].Url+'" name="'+a+'" />'); break; } } }; /*以下部分用于帖子内部使用*/ Arr_gaoda_img.push( {Url:"http://www.mahq.net/mecha/gundam/msgundam/ms-06s-char.jpg",Name:"前",Tag:"test"}, {Url:"http://t.douban.com/pics/logosmall.gif",Name:"后",Tag:"test"}, {Url:"http://www.baidu.com/img/logo-yy.gif",Name:"左",Tag:"bad"}, {Url:"http://gimg.baidu.com/img/gs.gif",Name:"左",Tag:"test"} ); show_gaoda_img("test"); </arr_gaoda_img></script> |
这样一来,只要做好CSS,将原先设定的函数添加到head中,余下的就可以让用户无限制的添加图片了,同时也不用担心一个页面中出现多次而导致相互冲突。
下面部分放在head部分
1 2 3 4 | < !−−你可以定义样式,在写js的时候,已经预留了class和id−−> <link rel='stylesheet' href='Arr_gaoda_img_style.css' type='text/css' media='all' /> < !−−将函数写在单独的文件里,在head处加载,类似于wp的插件−−> <script type='text/javascript' src='Arr_gaoda_img_js.js'></script> |
下面部分,可以交给用户使用(需要管理员权限)
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> Arr_gaoda_img.push( {Url:"http://www.test.com/img.jpg",Name:"文字1",Tag:"类别名"}, {Url:"http://www.test.com/img.jpg",Name:"文字1",Tag:"类别名"}, {Url:"http://www.test.com/img.jpg",Name:"文字1",Tag:"类别名"} ); show_gaoda_img("类别名"); </script> |
2条评论
我的妈啊,看的头晕
呵呵,看多了就习惯了
是颜色的问题么?