jQuery焦点图插件slideshow-jq.js

使用方法：

1.引入slider的基础样式slideshow.css (*require)

2.引入JS(*require)

<script src="js/jquery.min.js" type="text/javascript"></script>

(如果你引入其高版本的jquery,可能出现方法无效，此时请加入jQuery版本迁移辅助插件

<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>

情况,根据情况调整JS)

<script src="js/slideshow-jq.js" type="text/javascript"></script>

3.引入初始化代码

(function($) {
    function init() {
        wSlideshow.render({
            elementID: "mysite", //Dom 渲染的容器
            nav: "double_thumbnails", //看你是否需要有导航功能如果参数配置参数:[none,double_thumbnails] 则会显示图片导航条
            navLocation: "left", //自定标题的位置参数:[top,bottomm,left,right]
            captionLocation: "bottom", //自定标题的位置参数:[top,bottom]
            transition: "fade", //自定效果参数:[top,bottom]slide fade] 
            autoplay: "1", //自定义auto play 的次数
            speed: "5",
            aspectRatio: "auto",
            showControls: "true",
            randomStart: "false",
            images: [{
                    "url": "images/5568730.jpg",
                    "width": "332",
                    "height": "250",
                    "caption": "Foreign staff, Chinese Imperial Maritime Customs, Tientsin, 1877 or 1878 Photographed by William Francis Stevenson Collected by Peter Hodge"
                },
                {
                    "url": "images/1676626.jpg",
                    "width": "332",
                    "height": "250",
                    "caption": "The Bund, Shanghai, 1890s Photographed by William Francis Stevenson Collected by Peter Hodge"
                },
                {
                    "url": "images/7168681.jpg",
                    "width": "332",
                    "height": "250",
                    "caption": "Chinese women raising cocoons collected by http://www.jq22.com"
                }
            ] //定义图片url caption widh height 
        })
    }
    $ ? $(init) : document.observe('dom:loaded', init)
})(window._W && _W.$)

4.加入HTML:

<div class="mySlideWrap">
    <div id='mysite-slideshow'></div>
</div>

PREVIOUS:
NEXT:
高德地图标注列表（带右侧分类）
jQuery菜单背景动态滑动效果导航条