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

所属分类:媒体-幻灯片和轮播图

 22926  253  查看评论 (9)
分享到微信朋友圈
X
jQuery轮播图插件使用简单大小修改方便 ie兼容6

使用方法

引用所需两个文件

<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;
}
相关插件-幻灯片和轮播图

可嵌入图片全屏滑动

可嵌入图片视频jQuery全屏滑块
  幻灯片和轮播图
 24479  369
  幻灯片和轮播图
 23472  299

图片点击查看更多图片

仿京东,天猫商品详情 图片点击查看更多图片
  幻灯片和轮播图
 39015  234

js垂直轮播广告幻灯片

js垂直轮播广告幻灯片
  幻灯片和轮播图
 30586  315

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    JediKing1937 0
    2019/6/24 17:24:06
    动态添加做好了,还有一个问题,我页面同时有两个轮播图 两个都要动态添加,可是这个id class都一样 该怎么办? 回复
    JediKing1937 0
    2019/6/19 9:31:00
    你好,急求,怎么动态添加图片????很急 求楼主快回复
        areyouOk0
        2019/6/19 10:49:35

        后台程序循环生成以下两个li不就是动态了吗?两个ul中的li数量要一样

        <ul class="pb-carousel">
            <li><img src="img/5.jpg" alt="" /></li>
           。。。
        </ul>
        <ul class="pb-carousel-ind">
           <li></li>
           。。。
        </ul>
        JediKing19370
        2019/6/24 17:08:32
        谢谢您,动态添加做好了,还有一个问题,我页面同时有两个轮播图 两个都要动态添加,可是这个id class都一样 该怎么办?
        JediKing19370
        2019/6/24 17:15:39
        麻烦您了,看到请尽快回复~因为比较急,麻烦了
    回复
    孤竹 0
    2019/6/11 19:11:51
    第一个li是不是没加class 'pb-this',初始显示
        JediKing19370
        2019/6/19 9:34:03
        你好,急求,怎么动态添加图片????很急 求楼主快回复
    回复
    疑人 0
    2019/6/10 13:26:57
    有个问题,我们后台数据遍历上去后再去实例化容器的,为什么第一次初始化,轮播图第一次会显示空白图
        JediKing19370
        2019/6/19 9:32:07
        你好,急求,怎么动态添加图片????很急 求楼主快回复
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复