ChangeImg2.0简单图片项显示

2019独角兽企业重金招聘Python工程师标准>>>

注释说明：

/*
* 简单图片切换2.0
* 1.可配置控件大小，显示区大小、隐藏去大小
* 2.可控制箭头大小，箭头颜色
* 注意：
* 1.调用不要在 页面加载完成后执行
* 2.修改切换的显示效果
* 3.添加切换时间  changeTime
*/

使用实例：

    <div class="changeImg">
        <div data-options="{
             imgurl:'../Images/1.jpg',
             link:'http://www.baidu.com',
             title:'图片Two'
             }"></div>
        <div data-options="{
             imgurl:'../Images/2.jpg',
             link:'http://www.baidu.com',
             title:'图片Two'
             }"></div>
        <div data-options="{
             imgurl:'../Images/3.jpg',
             link:'http://www.baidu.com',
             title:'图片Two'
             }"></div>
        <div data-options="{
             imgurl:'../Images/4.jpg',
             link:'http://www.baidu.com',
             title:'图片Two'
             }"></div>
    </div>
    <script type="text/javascript">
        var changeImg = $('.changeImg').changeImg({
            width: 1004,//宽度
            height: 285,//高度
            showWidth: 817,//显示区宽度
            showHeight: 285,//显示区高度
            hideWidth: 175,//隐藏区宽度
            hideHeight: 60,//隐藏区高度
            autoTime:2000
        });
    </script>

显示结果预览：

github下载地址：

https://github.com/tianma3798/ChangeImg/

转载于:https://my.oschina.net/tianma3798/blog/538372