jQuery realizes the carousel map imitating Jingdong page (with request data)

first look at the effect

Carousel image imitating Jingdong page

The carousel will be paused after the mouse is moved in, and the carousel will be resumed after the mouse is removed

code show as below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
       .box{
        position: relative;
        margin: 50px auto;
        width: 590px;
        height: 470px;
        text-align: center;
       }
       .box img{
        width: 590px;
        height: 470px;
       }
       ul{
        position: absolute;
        bottom:10px;
        left:20px;
        display: flex;
       }
       li{
        margin-right: 10px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #fff;
       }
       .left,.right{
        position: absolute;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
        background-color: #faf6f6;
       }
       .left{
        left:0;
        top:235px;
       }
       .right{
        right:0;
        top:235px;
       }
       .active{
        background-color: red;
       }
    </style>
</head>
<body>
    <div class="box">
        <img src="../image/lb1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
    </div>
    <script>
        $(function(){
            // 从data.json中获取数据
            $.ajax({
            type:"get",
            dataType:"json",
            url:"data.json",
            success:function(data){
                let index = 0;
                // 控制页面数据的渲染
                function change(){
                    // 更改页面图片
                    $('.box img').attr('src',data[index].img_src);
                    // 移除已有active类的li的该属性
                    $('.active').removeClass('active');
                    // 给对应li添加active属性
                    $(`li:nth-child(${index+1})`).addClass('active');
                }
                // 点击左按钮
                $('.left').click(function(){
                    // 前一张图
                    index--;
                    // 判断index是否小于0，即是否左边图片到头啦
                    if(index < 0){
                      index = data.length - 1
                    }
                    change();
                 })
                // 点击右按钮
                 $('.right').click(function(){
                    // 后一张图
                    index++;
                    // 判断index是否大于等于8，即是否右边图片到头啦
                    if(index >= data.length){
                       index = 0
                    }
                    change();
                 })
                //  实现右按钮点击事件的自动调用
                 let time = setInterval(function(){
                    // 调用右按钮的点击事件
                    $('.right').click()
                },2000)
                // 鼠标移入box
                $('.box').mouseenter(function(){
                    // 关闭定时器
                    clearInterval(time)
                })
                // 鼠标移出box
                $('.box').mouseleave(function(){
                      // 关闭定时器
                      clearInterval(time)
                    //   开启定时器（和上面相同的定时器）
                    time = setInterval(function(){
                     // 调用右按钮的点击事件
                      $('.right').click()
                    },2000)
                })
                }        
          })
        })
    </script>
</body>
</html>

data.json

[
        {
           "title":"1",
           "img_src":"../image/lb1.jpg"
        },
        {
            "title":"2",
            "img_src":"../image/lb2.jpg"
        },
        {
            "title":"3",
            "img_src":"../image/lb3.jpg"
        },
        {
            "title":"4",
            "img_src":"../image/lb4.jpg"
        },
        {
            "title":"5",
            "img_src":"../image/lb5.jpg"
        },
        {
            "title":"6",
            "img_src":"../image/lb6.jpg"
        },
        {
            "title":"7",
            "img_src":"../image/lb7.jpg"
        },
        {
            "title":"8",
            "img_src":"../image/lb8.jpg"
        }
]

The picture resource comes from Jingdong: https://www.jd.com/?cu=true&utm_source=baidu-search&utm_medium=cpc&utm_campaign=t_262767352_baidusearch&utm_term=106807362512_0_bf2d9fe64e084cdbb3a8c2202047e866 https: // www.jd.com/?cu=true&utm_source=baidu-search&utm_medium=cpc&utm_campaign =t_262767352_baidusearch&utm_term=106807362512_0_bf2d9fe64e084cdbb3a8c2202047e866

Notice:

Since this is a json file written by myself, right-clicking the mouse to select Open In Default Browser will generate a cross-domain problem error when the local browser runs the project.

So choose Open with Live Server to open the web page.

jQuery realizes the carousel map imitating Jingdong page (with request data)

Guess you like