jQuery焦点图插件slideshow-jq.js

查看演示立即下载

插件描述：jQuery自动化图片比例焦点图slider效果

使用方法：

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

2.引入JS(*require)

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

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

1	`<script` `src="/"></script>`

情况,根据情况调整JS)

1	`<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 /"
                }
            ] //定义图片url caption widh height 
        })
    }
    $ ? $(init) : document.observe('dom:loaded', init)
})(window._W && _W.$)

4.加入HTML:

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery菜单背景动态滑动效果导航条
下一个特效：高德地图标注列表（带右侧分类）