jQuery轮播图插件使用简单大小修改方便

查看演示立即下载

插件描述：基于jquery轮播图插件，轮播支持左右，上下，渐隐渐闲类型，对低版本不支持

使用方法

引用所需两个文件

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/carousel.min.js" type="text/javascript" charset="utf-8"></script>

html结构

<div class="pb-carouselWarp demo1">
    <ul class="pb-carousel">
        <li class="pb-this"><img src="img/1.jpg" alt="" /></li>
        <li><img src="img/2.jpg" alt="" /></li>
        <li><img src="img/3.jpg" alt="" /></li>
        <li><img src="img/4.jpg" alt="" /></li>
        <li><img src="img/5.jpg" alt="" /></li>
    </ul>
    <ul class="pb-carousel-ind">
        <li class="pb-this"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button class="pb-arrow pb-arrow-prev"></button>
    <button class="pb-arrow pb-arrow-next" id="aa"></button>
</div>

carousel(
    $('.demo1'), //必选， 要轮播模块(id/class/tagname均可)，必须为jQuery元素
    {
        type: 'leftright', //可选，默认左右(leftright) - 'leftright' / 'updown' / 'fade' (左右/上下/渐隐渐现)
        arrowtype: 'move', //可选，默认一直显示 - 'move' / 'none'  (鼠标移上显示 / 不显示 )
        autoplay: true, //可选，默认true - true / false (开启轮播/关闭轮播)
        time: 3000 //可选，默认3000
    }
);

修改轮播图大小只需要对外层div样式宽高进行调整即可

.pb-carouselWarp {
    position: relative;
    width: 600px; //宽度
    height: 300px; //高度
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

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

上一个特效： vue.js表单登录tab切换
下一个特效： jQuery移动端抽奖大转盘（图片、文字、概率自设）