jquery无缝轮播图插件

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

 14058  38  查看评论 (12)
jquery无缝轮播图插件 ie兼容12

使用方法

引入css,js:

<link rel="stylesheet" type="text/css" href="./css/style.css"> 
<scriptt type="text/javascriptt" src="./scriptts/jquery-1.9.1.js"></scriptt> 
<scriptt type="text/javascriptt" src="./scriptts/carousel.js"></scriptt>

配置插件:

$(".carousel-content").carousel({
    carousel: ".carousel", //轮播图容器
    indexContainer: ".img-index", //下标容器 
    prev: ".carousel-prev", //左按钮 
    next: ".carousel-next", //右按钮 
    timing: 3000, //自动播放间隔
    animateTime: 700, //动画时间 
    autoPlay: true, //是否自动播放 true / false 
    direction: "left", //滚动方向right / left
});

若需要作用翻页按钮的动画按钮,加入如下代码:

$(".carousel-content").hover(function() {
    $(".carousel-prev,.carousel-next").fadeIn(300);
}, function() {
    $(".carousel-prev,.carousel-next").fadeOut(300);
});
$(".carousel-prev").hover(function() {
    $(this).find("img").attr("src", "./images/left2.png");
}, function() {
    $(this).find("img").attr("src", "./images/left1.png");
});
$(".carousel-next").hover(function() {
    $(this).find("img").attr("src", "./images/right2.png");
}, function() {
    $(this).find("img").attr("src", "./images/right1.png");
});

有问题可联系作者 QQ:1057503612

相关插件-幻灯片和轮播图

全屏无缝滚动加透明遮罩效果

全屏滚动JS 带有遮罩效果
  幻灯片和轮播图
 15246  113

jQuery手机触屏滑动的响应式图片轮播效果

jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码。
  幻灯片和轮播图
 21996  133

支持触屏的响应式带左右按钮的焦点图插件

jQuery触屏的响应式焦点图插件royalslider
  幻灯片和轮播图
 9063  73

仿酷狗轮播图超炫酷效果

将轮播图进行简易的封装能够很好的复用以及修改
  幻灯片和轮播图
 3876  21

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币

    PerterFeng?? 0
    2018/5/7 10:14:14
    <script type="text/javascriptt" src="./scripts/jquery-1.9.1.js"></script> 
    <script type="text/javascriptt" src="./scripts/carousel.js"></script>

    这里有点小错  应该是吧

        我只有你一个吖0
        2018/5/18 17:57:40
        嗯嗯,多写了一个 t
    回复
    crayon 0
    2018/5/3 18:03:04
    我现在还是一个学员看你的代码还有一点不懂
    回复
    crayon 0
    2018/5/3 18:01:58
    能不能回复一下
        我只有你一个吖0
        2018/5/18 18:00:04
        不好意思,有段时间没看了
    回复
    crayon 0
    2018/5/3 18:01:14
    很厉害 我问一下你的那个把复制第一张图片的节点放到最后是不是没用啊 好像冒似没用到吧
        我只有你一个吖0
        2018/5/18 17:59:02
        无缝轮播的原理就是这样的,只是你没有理解
    回复
    crayon 0
    2018/4/25 17:48:57
    ╁┽丶yo yo 0
    2018/3/22 10:53:56
    一个页面多次使用 怎么样不冲突 回复
    麦子 0
    2018/3/21 11:28:39
    不错的,支持下IE会更好推广 回复
    建行那个闷墩 0
    2018/3/21 9:34:59
    PanIc_ 0
    2018/3/19 23:36:03
取消回复