很好的素材！！再送大家一个幻灯轮播【有缩略图的】【一】

这个我只是简单做了一下  大家可以根据实际情况修改一下CSS



切换效果比这个更好的幻灯轮播【有缩略图的】【二】 快去查看

https://discuz.dismall.com/thread-3180420-1-1.html

DISCUZ！ X 系列模板定制。QQ405621584 合理的价位，贴心的服务！用别人的模板，不如用自己的模板！
模块代码：

<style type="text/css">
.slideshow span.title{font-size:12px;}
.slidebox{ position:relative;}
.slidebar img{ height:40px; width:52px;background:#fff;cursor:pointer; color:#333; font-family:"微软雅黑"; font-size:12px; border:1px solid #eee; padding:2px; margin:1px;}
.slidebar img.on{background:#A3CE4B; color:#fff;}
.slidebar{position:absolute;bottom:-50px;left:0px;}
</style>
<div class="module cl slidebox" style="position:relative;">
<ul class="slideshow">
    [loop]
   <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>
    [/loop]
</ul>
<div class="btns slidebar">
    [loop1]
        <img src="{pic}" width="52" height="40" />
    [/loop1]
</div>
</div>
<script type="text/javascript">
runslideshow();
</script>

看了下，很不错

怎么可以把下边的缩略图改成竖版放到图片右边呢

lyj1176 发表于 2012-7-27 02:40
怎么可以把下边的缩略图改成竖版放到图片右边呢

这个你可以找一个懂CSS的人 修改一下就好了的

十分感谢！特地登陆了个回复你！正在找这样子的幻灯呢，我回去修改了下，把缩略图改到右边了。

斐然测 发表于 2012-7-31 17:02
十分感谢！特地登陆了个回复你！正在找这样子的幻灯呢，我回去修改了下，把缩略图改到右边了。

可否告诉一下吗，，我也修改成功了，但是换到到360浏览器就错位了，郁闷了好几天了

看了下截图，真漂亮！

lyj1176 发表于 2012-8-2 01:32
可否告诉一下吗，，我也修改成功了，但是换到到360浏览器就错位了，郁闷了好几天了

1. <style type="text/css">
   
2. .slideshow span.title{font-size:12px;}
   
3. .slidebox{ width:650px;}
   
4. .slidebar img{ height:70px; width:100px;background:#fff;cursor:pointer; color:#333; font-family:"微软雅黑"; font-size:12px; border:1px solid #eee; padding:2px; margin:1px;}
   
5. .slidebar img.on{background:#A3CE4B; color:#fff;}
   
6. .slidebar{ float:right;bottom:50px;left:50px;}
   
7. </style>
   
8. 
   
9. <div id="syash_index">
   
10. <h2><span class="big">影像集</span></h2>
    
11. </div>
    
12. <br>
    
13. <div class="module cl slidebox" >
    
14.               <div style=" float:left;width:400px;">
    
15.               <ul class="slideshow">
    
16.                   [loop]
    
17.                  <li><a href="{url}"{target}><img src="{pic}" style="border:3px solid #cccccc;padding:2px; width:390px; height:310px;" /></a><span class="title">{title}   </span></li>
    
18.                   [/loop]
    
19.               </ul>
    
20.               </div>
    
21.                             <div class="btns slidebar" style=" width:230px;">
    
22.                                 [loop1]
    
23.                                     <img src="{pic}" width="52" height="40" />
    
24.                                 [/loop1]
    
25.                             </div>
    
26. </div>
    
27. <script type="text/javascript">
    
28. runslideshow();
    
29. </script>

复制代码

不错的模板代码！谢谢！

斐然测 发表于 2012-8-2 16:57

谢谢你啊，也谢谢楼主。你改的代码在360极速浏览器能用了，非常感谢。解决了我这几天的问题