phpcms v9中的焦点图切换插件jquery.sgallery.js的用法
jquery.sgallery.js是php cms中用于焦点图切换的插件。平常我们写焦点图切换，一般是自己写个函数。但是有时会不利于后台做循环，于是在项目中被要求使用这个插件。
好处是后台循环方便。下面就按老规矩，通过例子介绍插件的用法吧。1、下载并引用jquery.sgallery.js。
1
<script type="text/javascript" src="js/jquery.sgallery.js" ></script>
2、引用css样式
1
2
3
4
5
6
7
.FocusPic{zoom:1;position:relative; overflow:hidden}
.FocusPic .content{overflow:hidden; width:303px; min-height: 0; padding:0; height:260px; margin:0 !important;}
.FocusPic .changeDiv {height: 260px;}
.FocusPic .changeDiv div{position:absolute;top:0px;left:0px;width:294px;height:203px;display:none;}
.FocusPic .change{ position: absolute; right: 63px; bottom:10px; width:120px; margin:auto; z-index:9999;}
.FocusPic .change i {background-color:#c5c5c5; width:15px; height:15px; cursor:pointer; font-size:0px; line-height:15px; margin-left:13px;display:inline-block ;display:-moz-inline-stack; zoom:1;*display:inline;}
.FocusPic .change i.cur {background-color:#3dc7bf !important; width:15px; height:15px}
html代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="banner">
<div class="FocusPic">
<div class="content" id="main-slide">
<div class="changeDiv">
<a href="" class="bannerlist" style="display:block;">
<img src="images/focus.png" width="751" height="252" alt="">
<p>内容内容</p>
</a>
<a href="" class="bannerlist">
<img src="images/focus.png" width="751" height="252" alt="">
<p>内容内容</p>
</a>
<a href="" class="bannerlist">
<img src="images/focus.png" width="751" height="252" alt="">
<p>内容内容</p>
</a>
<a href="" class="bannerlist">
<img src="images/focus.png" width="751" height="252" alt="">
<p>内容内容</p>
</a>
</div>
</div>
</div>
其中FocusPic、main-slid、changeDiv是必须的，将需要切换的焦点图及内容包在里面即可。
样式表中的change是焦点图切换的按钮，是由后台动态生成的，只需要规定好样式就行了。3、调用方法。
1
new slide("#main-slide","cur",1000,260,1);//焦点图
“#main-slide”代表包裹焦点图的内容。
“cur”是按钮切换增加的样式。
1000,260,分别是焦点图的宽和高。到此，可以实现焦点图切换的效果啦。
页:
[1]