jquery无缝轮播图插件

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

 51987  374  查看评论 (19)
分享到微信朋友圈
X
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

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

jq全兼容自适应宽度图片轮播(新手适用)

简单的jq逻辑,方便引用,易看懂,兼容性好
  幻灯片和轮播图
 23283  212

jQuery幻灯片切换

jQuery网站宽屏banner幻灯片切换
  幻灯片和轮播图
 29882  381

jQuery无缝轮播渐变

无缝轮播渐变 无缝轮播渐变
  幻灯片和轮播图
 41152  330
  幻灯片和轮播图
 173270  439

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

    走至暮雪白头. 0
    2019/12/24 15:41:10
    怎么设置屏幕的宽度和屏幕大小一样大,高度根据图片大小的变化来适应呢
    回复
    0
    2019/8/15 21:24:08
    怎么改写li的宽度呢?我想改大,但是找不到这个设置
        西瓜1
        2019/8/15 23:33:40
        宽度修改:root{--mywidth: 600px;--myheight: 350px}
        0
        2019/8/16 0:25:36
        我尝试改变这个值了,但是改变了之后,图片没有自适应大小,谢谢!;感觉图片的宽度被限制了
        0
        2019/8/16 0:48:51
        解决了,感谢指教!!!
    回复
    SunJiaJing90 0
    2019/8/14 17:28:42
    你这个轮播图问题不是一点啊,兄弟 调节尺寸挺麻烦 也没有PC屏幕自应式 直接定义了一个 宽度600 高度350的类似常量root,我觉得你应该改的扩展性比较好在放上来 回复
    "Roll。Doigt 0
    2018/8/8 15:31:02
    左右两边的箭头点击,多次点击之后会有一个间隙是没有点击效果的,不过总体上很666了 回复
    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
    一个页面多次使用 怎么样不冲突 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复