尝试用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的时候，已经预留了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>

Related posts

2条评论

发表评论