使用carousel.js实现轮播效果

版权声明:仅仅菜鸟,愿帮到工作中预bug困惑的您 https://blog.csdn.net/weixin_41716259/article/details/82660743

//引入文件

<script type="text/javascript" src="js/carousel.js"></script>

//html代码

    <div id="carousel1" class="carousel-content">
        <ul class="carousel">
            <li><a href="/ams-page/3dprint"><img src="image/index/banner01.jpg"></a></li>
            <li><a href="/ams-page/3dprint"><img src="image/index/banner02.jpg"></a></li>
            <li><a href="#"><img src="image/index/banner03.jpg"></a></li>

        </ul>
        <ul class="carousel-index"></ul>
        <div class="carousel-prev"><img src="image/index/icons/left_btn1.png"></div>
        <div class="carousel-next"><img src="image/index/icons/right_btn1.png"></div>
    </div>

//js代码

    //轮播图
    $('#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","image/index/icons/left_btn2.png");
    },function(){
        $(this).find("img").attr("src","image/index/icons/left_btn1.png");
    });
    $(".carousel-next").hover(function(){
        $(this).find("img").attr("src","image/index/icons/right_btn2.png");
    },function(){
        $(this).find("img").attr("src","image/index/icons/right_btn1.png");
    });

猜你喜欢

转载自blog.csdn.net/weixin_41716259/article/details/82660743