★免费★【幻灯片样式】送给各位技术小白站长一个diy的幻灯片样式**x2x2.5x3通用

此演示图是300*300的图片大小


绿色按钮和白色按钮都可以换颜色  想换形状的话需要用图片替换或者... 比较麻烦 写了也不好理解
绿色和白色按钮的位置和间距也是可以调的，下面教教大家几样简单的方法调试他们

首先我们看一下模版数据，通过修改模版数据达到修改的目的



大家请看，下面就是上图的代码详情

1. <style>
   
2. .slidebar li {width: 8px;height: 8px;background:#009e96;filter: none; margin-right: 8px;}
   
3. .slidebar li.on {background:white;filter: none; }
   
4. </style>
   
5. <div class="module cl slidebox" style="height:330px;position: relative;">
   
6. <ul class="slideshow">
   
7. [loop]
   
8. <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>
   
9. [/loop]
   
10. </ul>
    
11. <ul class="slidebar" style="position: absolute;bottom:41px;right:30px;">
    
12. [loop1]<li></li>[/loop1]
    
13. </ul>
    
14. </div>
    
15. <script type="text/javascript">
    
16. runslideshow();
    
17. </script>

复制代码

绿色按钮的代码是background:#009e96;我们只需替换#009e96即可


白色按钮的代码是background:white;我们只需替换white即可


绿色白色按钮的位置（举例下边和右边）需要修改这2项：bottom:41px;right:30px;************bottom是下，right是右


绿色白色按钮的间距是需要修改这段

1. .slidebar li {width: 8px;height: 8px;background:#009e96;filter: none; margin-right: 8px;}

复制代码

代码中的margin-right: 8px; ****我们只需修改8这个数字来缩短或扩大它们之间的距离

代码中的width: 8px;height: 8px;***我们只需要修改8来调整方框的宽（width）和高（height）

下面是直接导入的幻灯片样式，只要在需要的页面导入此diy文件就可以了
frame4ZwXxF.zip (1.29 KB, 下载次数: 616)

2013-9-17 15:17 上传

点击文件名下载附件

最后老规矩，广而告之...
小修改15，大修改30，模版定制另算
业务联系QQ:56405992
魅族模版预购QQ群：314522102

沙发            

占楼编辑   

前排支持，准备用上 www.ggbmw.com

k58k 发表于 2013-9-17 16:18
前排支持，准备用上 www.ggbmw.com

看了你的站，幻灯片的标题可以设置短一些，这样就不会被切换按钮挡住影响美观了

用上了，有喜欢的朋友看演示吧！
感谢楼主提供这么好的东东；
有个问题，想请教下楼主：




红框中的，5个小框框可以设置大一点吗？

还不错！！关注支持~~

k58k 发表于 2013-9-17 16:31
用上了，有喜欢的朋友看演示吧！
感谢楼主提供这么好的东东；
有个问题，想请教下楼主：

谢谢，请看一楼红色字样，修改width: 8px;height: 8px;即可

潮宅男女 发表于 2013-9-17 16:33
还不错！！关注支持~~

谢谢站长关注

亲D 发表于 2013-9-17 16:42
谢谢，请看一楼红色字样，修改width: 8px;height: 8px;即可

哈哈，改成了自己想要的！感谢，感谢