Jquery轮播图

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

44164 348 查看评论 (17)

分享到微信朋友圈

查看演示立即下载

插件描述：简洁大气轮播图插件，可控制点击切换或者移至切换。代码逻辑清晰，便于学习。授人以鱼不如授人以渔。

使用方法：

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

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

jquery屏幕键盘插件Virtual Keyboard

touchslider手机滑动插件