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"
	});
});

把<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>

把如上黄色的代码放在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>

同时要把引入的样式进行修改

/* 下面是前/后按钮代码，如果不需要删除即可 */
.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;  }

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

来自为知笔记(Wiz)