jQuery实现轮播图

快别卷了啊

已于 2022-05-01 18:28:53 修改

阅读量1.2k

点赞数 2

文章标签： javascript jquery

于 2022-04-24 22:23:51 首次发布

本文链接：https://blog.csdn.net/qq_45605563/article/details/124393353

版权

css样式


<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>//导入jQuery文件

<style>
    *{margin: 0;padding: 0}
    li{list-style: none}
    .bnner{
        width: 820px;
        position: relative;
        margin: 0 auto;
    }
    .nav{
        width: 820px;
        height: 340px;
        border: 1px solid;
        overflow: hidden;
    }
    .nav_img{
        float: left;
        margin-left: 0px;
        width: 4120px;
        font-size: 0;
    }
    .nav_xiao{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

    }
    .nav_xiao>ul{
        display: flex;
    }
    .nav_xiao>ul>li{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #0da0b4;
        margin-left: 5px;
    }
    .nav_xiao>ul .mos{
        background: red;
    }
    .nav_left>div:nth-child(1){
        position: absolute;
        left: 0;
        top: 50%;
        font-size: 35px;
        border: 1px solid red;
    }
    .nav_left>div:nth-child(2){
        position: absolute;
        right: 0;
        top: 50%;
        font-size: 35px;
        border: 1px solid red;
    }
</style>

html结构

<div class="bnner">
    <div class="nav">
    <div class="nav_img">
        <img src="imgs/1.jpeg" alt="">
        <img src="imgs/2.jpeg" alt="">
        <img src="imgs/3.jpeg" alt="">
        <img src="imgs/2.jpeg" alt="">
        <img src="imgs/3.jpeg" alt="">
    </div>
</div>
    <div class="nav_xiao">
        <ul>
            <li class="mos"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="nav_left">
        <div>左</div>
        <div>右</div>
    </div>
</div>

jQuery代码

<script>

    //图片
    let ss=-820;//图片大小
    let sum=0; //自定义的索引下标
    function move(){    //开启定时器
        sum++;           //自定义的索引下标自增
        if (sum>=5){    //图片就五张不能让他大于5
            sum=0       //否则归零
        }
        $('.nav_xiao li').css('background','#0da0b4') //清空小圆点的颜色
        $('.nav_xiao li').eq(sum).css('background','red')//让当前跟图片对应的小圆点显示
        $('.nav_img').animate({         //animate动画用于过度
            'margin-left':ss*sum        //让当前下标乘图片宽 等于现在的位置
        },500)                          //500毫秒的延迟
    }

    //右
        $('.nav_left div:nth-child(2)').on('click',function(){ //右击按钮
        sum++                       //拿到当前自定义的索引下标 每点一下就让他加一
        if (sum>=5){                //如果大于等于五就让他归零
            sum=0
        }
        $('.nav_img').animate({     //让宽度乘以现在的下标索引
            'margin-left':ss*sum
        },500)
        $('.nav_xiao li').css('background','#0da0b4') //小圆点的样式，初始化
        $('.nav_xiao li').eq(sum).css('background','red')
    })

    $('.bnner').on('mouseenter',function(){    //移入停止定时器
        clearInterval(time)
    }).on('mouseleave',function(){          //移出开启定时器
         time = setInterval(move,indexs)
    })
    //左
    $('.nav_left div:nth-child(1)').on('click',function(){
        sum--                       //拿到当前自定义的索引下标 每点一下就让他减一
        if (sum<0){                 //同上判断
            sum=4                   //满足条件重新赋值
        }
        $('.nav_img').animate({
            'margin-left':ss*sum    //让宽度乘以现在的下标索引
        },500)
        $('.nav_xiao li').css('background','#0da0b4')
        $('.nav_xiao li').eq(sum).css('background','red')
    })
    //小圆点
    $('.nav_xiao li').each(function(index,ele){ //用each循环当前小圆点
        $(this).on('mouseenter',function(){     //每次移入当前移入的小圆点时触发的事件,这里的事件可以换成click
            $('.nav_xiao li').css('background','#0da0b4') //初始化样式
            $(this).css('background','red')             //让当前鼠标移入的小圆点样式变更
            $('.nav_img').css('margin-left',ss*index)   //让当前移入的小圆点的索引乘以宽度
            sum=index       //把当前触发索引给sum自定义下标索引
        })
    })
    let time=setInterval(move,2000)
    
</script>

下面这个是后来加的无缝滚动轮播图在最后面加一张第一张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<style>
    *{margin: 0;padding: 0}
    li{list-style: none}
    .bnner{
        width: 820px;       //图片多大这里就设多大
        position: relative;
        margin: 0 auto;
    }
    .nav{
        width: 820px;  //图片多大这里就设多大
        height: 340px;
        border: 1px solid;
        overflow: hidden;
    }
    .nav_img{
        float: left;
        margin-left: 0px;
        width: 4950px;    //总长度
        font-size: 0;
    }
    .nav_xiao{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

    }
    .nav_xiao>ul{
        display: flex;
    }
    .nav_xiao>ul>li{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #0da0b4;
        margin-left: 5px;
    }
    .nav_xiao>ul .mos{
        background: red;
    }
    .nav_left>div:nth-child(1){
        position: absolute;
        left: 0;
        top: 50%;
        font-size: 35px;
        border: 1px solid red;
    }
    .nav_left>div:nth-child(2){
        position: absolute;
        right: 0;
        top: 50%;
        font-size: 35px;
        border: 1px solid red;
    }
    .bnner_er ul>li>img{
        width: 120px;
        height: 120px;
    }

    .bnner_er>div{
        width: 250px;
        overflow: hidden;
    }
    .bnner_er ul{
        width: 1008px;
        /*display: flex;*/
        /*overflow: hidden;*/
    }
    .bnner_er ul>li{
        width: 250px;
        height: 120px;
        float: left;
        border: 1px solid red;
    }
</style>
<body>
<div class="bnner">
    <div class="nav">
    <div class="nav_img">
        <img src="imgs/1.jpeg" alt="">
        <img src="imgs/2.jpeg" alt="">
        <img src="imgs/3.jpeg" alt="">
        <img src="imgs/2.jpeg" alt="">
        <img src="imgs/3.jpeg" alt="">
        <img src="imgs/1.jpeg" alt="">
    </div>
</div>
    <div class="nav_xiao">
        <ul>
            <li class="mos"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="nav_left">
        <div>左</div>
        <div>右</div>
    </div>
</div>


<script>

function f(indexs) {
    $('.bnner').on('mouseenter',function(){
        clearInterval(time)
        console.log(111)
    }).on('mouseleave',function(){
         time = setInterval(move,indexs)
    })
        //图片
     let ssd=$('.nav').width()
    console.log(ssd)
    let ss=-ssd;
    let sum=0;
    function move(){
        sum++;
        if (sum>=6){
            $('.nav_img').css({
            'margin-left':0
        });

            sum=1
        }
        console.log(sum)
        $('.nav_xiao li').css('background','#0da0b4')
        $('.nav_xiao li').eq(sum).css('background','red')
        $('.nav_img').animate({
            'margin-left':ss*sum
        },500)
        if (sum==5){
            $('.nav_xiao li').css('background','#0da0b4')
            $('.nav_xiao li').eq(0).css('background','red')
        }
    }

    //右
        $('.nav_left div:nth-child(2)').on('click',function(){
        // function mover(){
            sum++
        if (sum>=6){
             $('.nav_img').css({
            'margin-left':0
        });
            sum=1
        }
        $('.nav_img').stop().animate({
            'margin-left':ss*sum
        },500)
        $('.nav_xiao li').css('background','#0da0b4')
        $('.nav_xiao li').eq(sum).css('background','red')
        // }
            if (sum==5){
            $('.nav_xiao li').css('background','#0da0b4')
            $('.nav_xiao li').eq(0).css('background','red')
        }
    })
    //左
    $('.nav_left div:nth-child(1)').on('click',function(){
        sum--;
        if (sum<0){
            $('.nav_img').css({
            'margin-left':-4100  //最后一张图片的起始距离 注意并不是总长度 总长度-一张的长度
        })
            sum=4
        }
        console.log(sum)
        $('.nav_img').animate({
            'margin-left':ss*sum
        })
        $('.nav_xiao li').css('background','#0da0b4')
        $('.nav_xiao li').eq(sum).css('background','red')
    });
    //小圆点
    $('.nav_xiao li').each(function(index,ele){
        $(this).on('click',function(){
            $('.nav_xiao li').css('background','#0da0b4')
            $(this).css('background','red')
            $('.nav_img').animate({
                'margin-left':ss*index
            })
            sum=index
        })
    })
    let time = setInterval(move,indexs)
}


f(2000);
</script>

</body>
</html>