关于幻灯slidebox问题

阿征

根据教程，diy代码及CSS代码为：

1. .fh_slide {
   
2.     position: relative;
   
3. }
   
4. .fh_slide .slidebar {
   
5.     position: absolute;
   
6.     top: 10px;
   
7.     right: 0px;
   
8. }
   
9. .fh_slide .slidebar span {
   
10.     width: 17px;
    
11.     height: 17px;
    
12.     background: #dfdfdf;
    
13.     display: inline-block;
    
14.     text-align: center;
    
15.     border: 1px solid #000;
    
16.     margin-right: 2px;
    
17. }
    
18. .fh_slide .slidebar span.on {
    
19.     background: #a5cd46;
    
20.     color: #fff;
    
21. }
    
22. 
    
23. 
    
24. <div class="fh_slide slidebox">
    
25. <div class="slideshow">
    
26. [loop]
    
27. <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>
    
28. [/loop]
    
29. </div>
    
30. <div class="slidebar">
    
31. [loop1]
    
32. <span>{currentorder}</span>
    
33. [/loop1]
    
34. </div>
    
35. </div>

复制代码

显示的效果为：


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

admin

1. [loop]<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]

复制代码

修改loop循环语句里面的width为100%即可，如上！
修改后的效果：

阿征

不解这是什么问题

admin

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

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

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

阿征

经测试不行

阿征

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

1. <div class="fh_slide">
   
2. <div class="slidebox">
   
3. <div class="slideshow">
   
4. [loop]
   
5. <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>
   
6. [/loop]
   
7. </div>
   
8. <div class="slidebar">
   
9. [loop1]
   
10. <span>{currentorder}</span>
    
11. [/loop1]
    
12. </div>
    
13. </div>
    
14. </div>
    
15. <script type="text/javascript">
    
16. runslideshow();
    
17. </script>

复制代码

1. .fh_slide {
   
2.     position: relative;
   
3.         display: inline-block;
   
4. }
   
5. .fh_slide .slidebar {
   
6.     position: absolute;
   
7.     top: 10px;
   
8.     right: 0px;
   
9. }
   
10. .fh_slide .slidebar span {
    
11.     width: 17px;
    
12.     height: 17px;
    
13.     background: #dfdfdf;
    
14.     display: inline-block;
    
15.     text-align: center;
    
16.     border: 1px solid #000;
    
17.     margin-right: 2px;
    
18. }
    
19. .fh_slide .slidebar span.on {
    
20.     background: #a5cd46;
    
21.     color: #fff;
    
22. }

复制代码

阿征

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

admin

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

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

阿征

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

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