SuperSlide的使用

先去官网下载http://www.superslide2.com/


下载过后解压把

放在自己需要引入的js里面引入然后点击demo.html选择自己需要的效果


把此行代码复制到javascript中一般jquery的写法可以改变一下为

$(document).ready(function(e) {

$(".apcon").slide({

mainCell:".bd ul",

titCell:'.hd ul',

autoPlay:true,

autoPage:true,

effect:"topLoop",

easing:"easeOutCirc"

});

});

[/code]


把<div class="hd"><ul></ul></div>

<div class="bd">

<ul>

<!--从数据库中查询出荣誉资质图片在此显示-->

<?php

$rs=query('hnsc_zz','url,ztitle',"flag='y'",'order by id desc',5);

foreach($rs as $v){

?>

<li><img src="upload/zz/s_<?=$v[0]?>"></li>

<?php }?>

</ul>

</div>

</div>

[/code]把如上黄色的代码放在php或者html文件中然后进入demo文件中


找到你要的效果图的html文件，点击进入查看源代码把里面的css样式引进来 即可点击查看效果，记得把slideBox修改为apcon


如要使用箭头效果要在文件中加入如下的黄色代码

<div class="apcon">

<div class="hd">

<ul></ul>

</div>

<div class="bd">

<ul>

<!--从数据库中查询出荣誉资质图片在此显示-->

<?php

$rs=query('hnsc_zz','url,ztitle',"flag='y'",'order by id desc',5);

foreach($rs as $v){

?>

<li><img src="upload/zz/s_<?=$v[0]?>"></li>

<?php }?>

</ul>

</div>

<a class="prev" href="javascript:void(0)"></a>

<a class="next" href="javascript:void(0)"></a>

</div>

[/code]同时要把引入的样式进行修改

/* 下面是前/后按钮代码，如果不需要删除即可 */

.apcon .prev,

.apcon .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }

.apcon .next{ left:auto; right:3%; background-position:8px 5px; }

.apcon .prev:hover,

.apcon .next:hover{ filter:alpha(opacity=100);opacity:1;  }

.apcon .prevStop{ display:none;  }

.apcon .nextStop{ display:none;  }

[/code]把标黄的图片地址给修改了，去/demo/ images文件里面把箭头的图片给放到需要自己网站需要的images里面图片引入的时候路径不要错，即可实现

来自为知笔记(Wiz)