演示效果：

代码下载：点击下载

以下为配置使用方式:    
<!-- 引入文件 -->
<link rel="stylesheet" href="./css/style.css"> 
<script src="./js/jquery.min.js"></script> 
<script src="./js/carousel.js"></script>

配置插件
$('#carousel1').carousel({
    el: {
        imgsContainer: '.carousel', // 图片容器 
        prevBtn: '.carousel-prev', // 上翻按钮 
        nextBtn: '.carousel-next', // 下翻按钮
        indexContainer: '.carousel-index', // 下标容器  
    },
    conf: {
        auto: true, //是否自动播放 true/false 默认:true 
        needIndexNum: true, //是否需要下标数字 true/false 默认:true 
        animateTiming: 1000, //动画时长(毫秒) 默认:1000 
        autoTiming: 3000, //自动播放间隔时间(毫秒) 默认:3000 
        direction: 'right', //自动播放方向 left/right 默认:right   
    }
});

 如果有需要， 可添加以下代码提供用户体验：
 $(".carousel-prev").hover(function() {
     $(this).find("img").attr("src", "./images/icons/left_btn2.png");
 }, function() {
     $(this).find("img").attr("src", "./images/icons/left_btn1.png");
 });
 $(".carousel-next").hover(function() {
     $(this).find("img").attr("src", "./images/icons/right_btn2.png");
 }, function() {
     $(this).find("img").attr("src", "./images/icons/right_btn1.png");
 });
 $("#carousel3").find('.carousel-prev,.carousel-next,.carousel-index').hide();
 $("#carousel3").hover(function() {
     $(this).find(".carousel-prev,.carousel-next,.carousel-index").stop().fadeIn(300);
 }, function() {
     $(this).find(".carousel-prev,.carousel-next,.carousel-index").stop().fadeOut(300);
 });
使用遇到问题请留言...

使用方法

只需要引用以下文件
<script type="text/javascript" src="./scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./scripts/carousel.js"></script>

调用方法
$(".carousel-content").carousel({
    carousel : ".carousel",//轮播图容器
    indexContainer : ".img-index",//下标容器
    prev : ".carousel-prev",//左按钮
    next : ".carousel-next",//右按钮
    timing : 5000,//自动播放间隔
    animateTime : 800,//动画时间
    auto : true,//是否自动播放
});