jq轮播+手动+自动+指示器

最新推荐文章于 2024-10-10 20:02:02 发布

LZYSMT

最新推荐文章于 2024-10-10 20:02:02 发布

阅读量510

点赞数

CC 4.0 BY-SA版权

分类专栏：前端常用文章标签： jq轮播

本文链接：https://blog.youkuaiyun.com/weixin_41065538/article/details/82936254

前端常用专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何使用jQuery（jq）实现轮播图功能，包括手动滑动和自动切换，并结合指示器进行状态显示。通过HTML布局、CSS样式设置以及JavaScript脚本编写，详细讲解了轮播图的实现步骤和关键代码。

html：

<div id="banner" class="banner  ">
    <div id="lunbo" class="lunbo">
        <ul>
            <li><a href=""><img src="images/slide01.jpg" alt=""></a></li>
            <li><a href=""><img src="images/slide02.jpg" alt=""></a></li>
            <li><a href=""><img src="images/slide03.jpg" alt=""></a></li>
            <li><a href=""><img src="images/slide04.jpg" alt=""></a></li>
            <li><a href=""><img src="images/slide05.jpg" alt=""></a></li>
        </ul>
    </div>
    <div id="point" class="point">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
    <a href="#" class="prev"><img width="80px" height="80px" src="images/pl.png" alt=""></a>
    <a href="#" class="next"><img width="80px" height="80px" src="images/pr.png" alt=""></a>


</div>

css：

.banner {
    width: 100%;
    margin: 20px 0;
    background-color: #efefef;
    padding: 20px 0 20px 0;
    position: relative;

}

.banner .lunbo {
    width: 960px;
    height: 340px;
    margin: 0 auto;
    overflow: hidden;
}

.banner .lunbo ul {
    width: 600%;
    height: 340px;
}

.banner .lunbo ul li {
    z-index: 99;
    float: left;
    width: 960px;
    height: 340px;
}

.banner .point {
    position: absolute;
    right: 20%;
    bottom: 10px;
}

.banner .point p {
    text-align: center;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 5px;
    display: inline-block;
    border: 1px solid white;
    border-radius: 50%;
    color: white;
    cursor: pointer;
}

.banner .point .current {
    background-color: #f4a523;
}

.prev,.next{
    position: absolute;
    top: 190px;
    opacity: 0.6;
    color: red;
}
.next{
    right: 20%;
}
.prev{
    left: 22%;
}

jq+js：

$(function () {
    // 编写jQuery相关代码
    // alert("hello lnj");
    var num = 0;
    var timer = null, timeout = null;

    $('#point p').eq(0).addClass('current');
    // console.log($('#point p').eq(0));
    /*指示器*/
    $('#point p').mouseover(function () {
        clearInterval(timer);
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        num = $(this).index();
        //设置悬浮时500毫秒时切换，不足100毫秒时不会切换
        timeout = setTimeout(changgeMg, 100);
        // timer = setInterval(changeImg, 2000);
        return false;
    })
    /*悬浮停止动画*/
    $('#lunbo').mouseover(function () {
        clearInterval(timer);

    });
    $('#lunbo').mouseout(function () {
        timer = setInterval(changeImg, 2000);

    });
    /*箭头*/
    $('.next').click(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        if (num < 4) {
            num++;
        } else {
            num = 0;
        }
        timeout = setTimeout(changgeMg, 100);
        return false;
    })
    $('.prev').click(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }
        if (num > 0) {
            num--;
        } else {
            num = 4;
        }
        timeout = setTimeout(changgeMg, 100);

        return false;
    });

    /*轮播动画+指示器上色*/
    function changgeMg() {
        move = -num * 960 + 'px';
        $('#lunbo ul').animate({
            marginLeft: move
        }, 200);
        $('#point p').eq(num).addClass('current').siblings().removeClass('current');
    }


    /*自动轮播定时器*/
    timer = setInterval(changeImg, 2000);

    function changeImg() {
        if (num < 4) {
            num++;
        } else {
            num = 0;
        }
        console.log(num);
        changgeMg();
    }


});