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

 查看演示  website  立即下载

使用方法

引用所需两个文件

<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>

js

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;
}

PREVIOUS:
NEXT:
jQuery移动端抽奖大转盘（图片、文字、概率自设）
vue.js表单登录tab切换