Jquery轮播图

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

 35168  268  查看评论 (17)
分享到微信朋友圈
X
Jquery轮播图 ie兼容10

使用方法:

不要忘了引用核心文件哦~

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

js代码:

var bannerSlide = new slide($("#banner-tab"), {
    time: 4000,
    event: "hover",
    auto: true,
    controller: $('#bannerCtrl')
});
$(".prev").click(function() {
    bannerSlide.prev();
});
$(".next").click(function() {
    bannerSlide.next();
})

time: "滚动间隔时间",

event: "hover/click",

auto: "是否自动播放",

controller: "控制图标的class名" 


html代码:   

<div id="banner-tab" class="flexslider">
    <div class="slideBox">
        <ul class="slides">
            <li><img width="960" height="540" src="img/bleck.jpg"></li>
            <li><img width="960" height="540" src="img/fute.jpg"></li>
            <li><img width="960" height="540" src="img/yema.jpg"></li>
            <li><img width="960" height="540" src="img/white.jpg"></li>
        </ul>
    </div>
    <ul class="flex-direction-nav">
        <li disabled="true" class="prev"><</li>
        <li class="next">></li>
    </ul>
    <ol id="bannerCtrl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>
相关插件-幻灯片和轮播图

支持手机触摸滑动图片轮播

支持手机触摸滑动图片幻灯片轮播切换代码
  幻灯片和轮播图
 66662  782

anoSlide演示8种焦点图轮播效果

anoSlide演示8种焦点图轮播效果
  幻灯片和轮播图
 21277  253
  幻灯片和轮播图
 32350  289

iSlider手机端图片滑动切换插件

iSlider.js手机幻灯片代码制作手指滑动手机端图片轮播代码
  幻灯片和轮播图
 68245  410

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

    蔡灿杰 0
    2018/5/9 15:55:10
    你是我的菜 0
    2017/7/3 17:04:40
    1874 0
    2016/8/2 9:08:04
    从最后一张图到第一张图的切换,感觉这样用户体验不太好哎。。。。。
        -Dfc_0
        2017/3/25 11:15:48

    回复
    孙行者 0
    2016/7/20 15:07:01
    实用
        久昧0
        2017/9/12 11:11:41

        挺好的

    回复
    随风随雨 0
    2016/7/13 14:07:28
    可以显示多张图吗? 回复
    刹那芳华liden 0
    2016/4/11 10:04:12
    Shine.D 0
    2016/3/8 22:03:25
    是不是有bug,当添加更多图片时,轮播的图片还是4张。
        Shine.D2
        2016/3/8 22:03:47
        刚才查看了源代码,length = container.children().length + 1,这句代码,应该是错误的。应该修改成:length = $(".slides").children().length,
        老K0
        2017/3/19 22:02:00

        不好意思啊 = = ,这个太久没改动过了。后来就放那了

    回复
    暴漫小毛驴 0
    2016/1/22 10:01:41
    戾太子 0
    2016/1/13 15:01:55

    很实用的东西,但是如果能免费,那就更好了!

    回复
    thirdShe 0
    2016/1/13 15:01:15

    没css啊 提示slider找不到

        西瓜0
        2016/1/13 16:01:18

        banner.css 引用好就行了。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复