这个幻灯片我是在论坛里找到的,感觉不错。就拿来用了。

发现如果不设置图片他还是会多出来几个空白幻灯片。

http://bbs.xiuno.com/thread-10689.htm

多出来的空白很影响美观,不说美观也感觉很变扭。没有幻灯片应该不显示的。

于是我给代码进行了改进,直接判断如果没有图片就不出现这一张幻灯片。

演示地址:http://dy.nnbbxx.net/

下载地址:xn_slide 请到左侧共享文件里找一下

我的改进方法是 找到 插件目录里的xn_slide.htm

然后会发现一些判断URL和图片内容是否为空的PHP语句。

直接把URL判断删除。把URL判断里的html移动到 img判断语句里。

还有要记得把

  • 标签移动到判断里,不然还会多出来的。
  • 可以直接复制我改好的 覆盖 xn_slide.htm

    进行了判断如果为空就不显示代码。

    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
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <link rel="stylesheet" href="./plugin/xn_slide/css/style.css">
    <?$pconf = xn_json_decode(file_get_contents('./plugin/xn_slide/conf.json'));?>
    <script type="text/javascript" src="./plugin/xn_slide/js/jquery1.42.min.js"></script>
    <script type="text/javascript" src="./plugin/xn_slide/js/jquery.SuperSlide.2.1.2.js"></script>
    <div class="fullSlide">
    <div class="bd">
    <ul>
    <!--第一张幻灯片-->
    <? if($pconf['xn_slide_img1']!= '') { ?>
    <li>
    <a target="_blank" href="<?=$pconf['xn_slide_url1']?>">
    <img src="<?=$pconf['xn_slide_img1']?>"/>
    </a>
    </li>
    <? } ?>

    <!--第二张幻灯片-->
    <? if($pconf['xn_slide_img2']!= '') { ?>
    <li>
    <a target="_blank" href="<?=$pconf['xn_slide_url2']?>">
    <img src="<?=$pconf['xn_slide_img2']?>"/>
    </a>
    </li>
    <? } ?>

    <!--第三张幻灯片-->
    <? if($pconf['xn_slide_img3']!= '') { ?>
    <li>
    <a target="_blank" href="<?=$pconf['xn_slide_url3']?>">
    <img src="<?=$pconf['xn_slide_img3']?>"/>
    </a>
    </li>
    <? } ?>

    <!--第四张幻灯片-->
    <? if($pconf['xn_slide_img4']!= '') { ?>
    <li>
    <a target="_blank" href="<?=$pconf['xn_slide_url4']?>">
    <img src="<?=$pconf['xn_slide_img4']?>"/>
    </a>
    </li>
    <? } ?>

    <!--第五张幻灯片-->
    <? if($pconf['xn_slide_img5']!= '') { ?>
    <li>
    <a target="_blank" href="<?=$pconf['xn_slide_url5']?>">
    <img src="<?=$pconf['xn_slide_img5']?>"/>
    </a>
    </li>
    <? } ?>

    </ul>
    </div>
    <div class="hd">
    <ul>
    </ul>
    </div>
    <a class="prev" href="javascript:void(0)"></a>
    <a class="next" href="javascript:void(0)"></a>
    </div>
    <script type="text/javascript">
    jQuery(".fullSlide").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"leftLoop", vis:"auto", autoPlay:true, autoPage:true, trigger:"click" });
    </script>