首页 › Discuz交流（有问必答） › 关于幻灯slidebox问题

阿征 发表于 2014-7-31 12:03:23

关于幻灯slidebox问题

根据教程，diy代码及CSS代码为：
.fh_slide {
    position: relative;
}
.fh_slide .slidebar {
    position: absolute;
    top: 10px;
    right: 0px;
}
.fh_slide .slidebar span {
    width: 17px;
    height: 17px;
    background: #dfdfdf;
    display: inline-block;
    text-align: center;
    border: 1px solid #000;
    margin-right: 2px;
}
.fh_slide .slidebar span.on {
    background: #a5cd46;
    color: #fff;
}


<div class="fh_slide slidebox">
<div class="slideshow">

<li style="width: {picwidth}px; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{title}</span></li>

</div>
<div class="slidebar">

<span>{currentorder}</span>

</div>
</div>
显示的效果为：


可以看到，图片序号跑到最右边了。
如何能让图片序号跟图片的位置对齐。
这是测试网站。http://discuz.0359fh.com/forum.php

admin 发表于 2014-7-31 13:20:49

<li style="width: 100%; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{title}</span></li>修改loop循环语句里面的width为100%即可，如上！
修改后的效果：

阿征 发表于 2014-7-31 14:39:50

不解这是什么问题

admin 发表于 2014-7-31 14:55:36

阿征 发表于 2014-7-31 06:39
不解这是什么问题

你的diy框架式1:1的框架
当框架为1：1时，两个框架的宽度为wp宽度的一般，也就是49%；
而你定义的loop循环里面的里的宽度是定死的，只有200个像素！

所以修改以后你也应该把你的幻灯片的图片的宽度修改为100%，或者459px；

阿征 发表于 2014-7-31 15:09:03

经测试不行

阿征 发表于 2014-7-31 16:58:16

通过更改代码，完美解决问题。
改变diy代码，<div class="fh_slide">加入css
<div class="fh_slide">
<div class="slidebox">
<div class="slideshow">

<li style="width: {picwidth}px; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{title}</span></li>

</div>
<div class="slidebar">

<span>{currentorder}</span>

</div>
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>.fh_slide {
    position: relative;
        display: inline-block;
}
.fh_slide .slidebar {
    position: absolute;
    top: 10px;
    right: 0px;
}
.fh_slide .slidebar span {
    width: 17px;
    height: 17px;
    background: #dfdfdf;
    display: inline-block;
    text-align: center;
    border: 1px solid #000;
    margin-right: 2px;
}
.fh_slide .slidebar span.on {
    background: #a5cd46;
    color: #fff;
}

阿征 发表于 2014-7-31 16:59:14

不知道为什么，别人网站可以正确显示，。我的需要变 改代码。好在完美解决了。

admin 发表于 2014-7-31 17:22:31

阿征 发表于 2014-7-31 08:59
不知道为什么，别人网站可以正确显示，。我的需要变 改代码。好在完美解决了。

刚刚我帮你修改的时候，你就也在修改!后来看你改好了！

阿征 发表于 2014-8-1 08:58:19

admin 发表于 2014-7-31 17:22
刚刚我帮你修改的时候，你就也在修改!后来看你改好了！

非常感谢你的帮助，，有问必答。相信网站会越来越棒的！！

查看完整版本: 关于幻灯slidebox问题