尝试用js解决wp的手动轮播效果

之前有朋友问我,怎么实现手动图片轮播的方法。

当时,觉得是挺简单的一件事情,用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的时候,已经预留了classid−−>
<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>

Related posts

《尝试用js解决wp的手动轮播效果》有2个想法

发表评论