jquery无缝轮播图插件

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

 7831  19  查看评论 (4)
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

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

jQuery仿百度新闻首页焦点图

jQuery仿百度新闻首页焦点图
  幻灯片和轮播图
 19877  109

jQuery滑动式图片轮播效果

jQuery滑动式图片轮播效果兼容ie6
  幻灯片和轮播图
 11682  25

jQuery焦点图插件slideshow-jq.js

jQuery自动化图片比例焦点图slider效果
  幻灯片和轮播图
 5349  23

jQuery仿百度图片浏览效果

jQuery仿百度图片浏览效果
  幻灯片和轮播图
 13624  60

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

    ╁┽丶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
取消回复