轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

Rocke369

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量137

点赞数

分类专栏：组件源码

本文链接：https://blog.csdn.net/qq_39314291/article/details/81145171

版权

组件源码专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1) Add HTML

<div id="slider-bar">
    <div id="imgs-box">
        <ul>
            <li><img src="https://i.imgur.com/4Fk8z2L.jpg" alt=""></li>
            <li><img src="https://i.imgur.com/C0e0zms.jpg" alt=""></li>
            <li><img src="https://i.imgur.com/24Ri2FT.jpg" alt=""></li>
            <li><img src="https://i.imgur.com/tmLQ3r7.jpg" alt=""></li>
        </ul>
    </div>
    <div id="indicators-box">
        <ol>
            <li style="background-color: #a10000"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div id="control-box">
        <span class="left">上一张</span>
        <span class="right">下一张</span>
    </div>
</div>

2） Add CSS

#slider-bar {
    margin: 100px auto;
    width: 750px;
    height: 281px;
    position: relative;
    overflow: hidden;
}

#imgs-box ul li {
    width: 750px;
    height: 281px;
    position: absolute;
    left: 0;
    top: 0;
}

#imgs-box ul li:first-child {
    display: block;
}

#slider-bar ol {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

#slider-bar ol li {
    width: 20px;
    height: 20px;
    background-color: darkgray;
    display: inline-block;
    margin-right: 3px;
    border-radius: 50%;
    cursor: pointer;
}

#slider-bar ol li.current {
    background-color: orangered;
}

#control-box span {
    cursor: pointer;
    text-indent: -999em;
    position: absolute;
    width: 41px;
    height: 69px;
    top: 90px;
}

#control-box span.left {
    background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -84px 50%;
    left: 20px;
}

#control-box span.right {
    background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -125px 50%;
    right: 20px;
}

#control-box span.left:hover {
    background: url(https://i.imgur.com/LpPhS8J.png);
}

#control-box span.right:hover {
    background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -43px 50%;
}

3) Add jQuery

    var c = 0;
    // 1 自动轮播
    var timer = setInterval((function () {
        c++;
        c = c == 4 ? 0 : c;
        $("#imgs-box ul li").eq(c).fadeIn(300).siblings('li').fadeOut(300);
        $("#indicators-box ol li").eq(c).css('background', '#a10000').siblings('li').css('background', '#ddd');
    }), 2000);
    // 2 鼠标移入/移处轮播图时
    $("#slider-bar").hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval((function () {
            c++;
            c = c == 4 ? 0 : c;
            $("#imgs-box ul li").eq(c).fadeIn(300).siblings('li').fadeOut(300);
            $("#indicators-box ol li").eq(c).css('background', '#a10000').siblings('li').css('background', '#ddd');
        }), 1000);
    });
    // 3 鼠标进入轮播图片指针时
    $("#indicators-box ol li").mouseenter(function () {
        c = $(this).index();
        $("#imgs-box ul  li").eq(c).fadeIn(300).siblings('li').fadeOut(300);
        $("#indicators-box ol li").eq(c).css('background', '#a10000').siblings('li').css('background', '#ddd');
    })
    // 4 鼠标点击上一张按钮时
    $("#control-box .left").click(function () {
        c -= 1;
        c = c == -1 ? 3 : c;
        $("#imgs-box ul li").eq(c).fadeIn(300).siblings('li').fadeOut(300);
        $("#indicators-box ol li").eq(c).css('background', '#a10000').siblings('li').css('background', '#ddd');
    })
    // 5 鼠标点击下一张按钮时
    $("#control-box .right").click(function () {
        c += 1;
        c = c == 4 ? 0 : c;
        $("#imgs-box ul li").eq(c).fadeIn(300).siblings('li').fadeOut(300);
        $("#indicators-box ol li").eq(c).css('background', '#a10000').siblings('li').css('background', '#ddd');
    })