phpcms v9中的焦点图切换插件jquery.sgallery.js的用法

jquery.sgallery.js是php cms中用于焦点图切换的插件。
平常我们写焦点图切换，一般是自己写个函数。但是有时会不利于后台做循环，于是在项目中被要求使用这个插件。
好处是后台循环方便。下面就按老规矩，通过例子介绍插件的用法吧。

1、下载并引用jquery.sgallery.js。

[size=1em]

[size=1em]1

[size=1em][size=1em]<script type="text/javascript" src="js/jquery.sgallery.js" ></script>

2、引用css样式

[size=1em]

[size=1em]1 [size=1em]2 [size=1em]3 [size=1em]4 [size=1em]5 [size=1em]6 [size=1em]7

[size=1em][size=1em].FocusPic{zoom:1;position:relative; overflow:hidden} [size=1em].FocusPic .content{overflow:hidden; width:303px; min-height: 0; padding:0; height:260px; margin:0 !important;} [size=1em].FocusPic .changeDiv {height: 260px;} [size=1em].FocusPic .changeDiv div{position:absolute;top:0px;left:0px;width:294px;height:203px;display:none;} [size=1em].FocusPic .change{ position: absolute; right: 63px; bottom:10px; width:120px; margin:auto; z-index:9999;} [size=1em].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;} [size=1em].FocusPic .change i.cur {background-color:#3dc7bf !important; width:15px; height:15px}

html代码如下：

[size=1em]

[size=1em]1 [size=1em]2 [size=1em]3 [size=1em]4 [size=1em]5 [size=1em]6 [size=1em]7 [size=1em]8 [size=1em]9 [size=1em]10 [size=1em]11 [size=1em]12 [size=1em]13 [size=1em]14 [size=1em]15 [size=1em]16 [size=1em]17 [size=1em]18 [size=1em]19 [size=1em]20 [size=1em]21 [size=1em]22 [size=1em]23 [size=1em]24

[size=1em][size=1em]<div class="banner"> [size=1em]    <div class="FocusPic"> [size=1em]        <div class="content" id="main-slide"> [size=1em]            <div class="changeDiv"> [size=1em]                <a href="" class="bannerlist" style="display:block;"> [size=1em]                    <img src="images/focus.png" width="751" height="252" alt=""> [size=1em]                    <p>内容内容</p> [size=1em]                </a> [size=1em]                <a href="" class="bannerlist"> [size=1em]                    <img src="images/focus.png" width="751" height="252" alt=""> [size=1em]                     <p>内容内容</p> [size=1em]                </a> [size=1em]                <a href="" class="bannerlist"> [size=1em]                    <img src="images/focus.png" width="751" height="252" alt=""> [size=1em]                    <p>内容内容</p> [size=1em]                </a> [size=1em]                <a href="" class="bannerlist"> [size=1em]                    <img src="images/focus.png" width="751" height="252" alt=""> [size=1em]                    <p>内容内容</p> [size=1em]                </a> [size=1em]            </div> [size=1em]        </div> [size=1em]    </div>

其中FocusPic、main-slid、changeDiv是必须的，将需要切换的焦点图及内容包在里面即可。
样式表中的change是焦点图切换的按钮，是由后台动态生成的，只需要规定好样式就行了。

3、调用方法。

[size=1em]

[size=1em]1

[size=1em][size=1em]new slide("#main-slide","cur",1000,260,1);//焦点图

“#main-slide”代表包裹焦点图的内容。
“cur”是按钮切换增加的样式。
1000,260,分别是焦点图的宽和高。

到此，可以实现焦点图切换的效果啦。