Front end learning - carousel chart case

Keywords: JQuery network IE

Article directory

Preface

Last article: Front end learning (3) - jQuery function library
The last article briefly introduces the functions of the next jQuery function library. In this article, I will apply what I learned in the previous article to the actual development, and get familiar with jQuery through the example of rotation pattern.

Import jQuery function library

There are two ways to get jQuery function library. You can download jQuery locally and import it through script, or directly use url when the network allows.
Common download address of jQuery: http://www.jq22.com/jquery-info122

/*You can use one of the two methods. The first is to introduce the package through url cross domain. The second is to introduce the local package after downloading to the local*/
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="jquery/jquery.min.js"></script>

Rotation chart

requirement analysis

  • A window to rotate pictures to realize automatic rotation of pictures.
  • When the mouse enters the window of the carousel chart, the auto carousel stops and resumes after the mouse is removed.
  • You can control the picture playing through the left and right buttons.
  • There is a floating bar at the bottom of the window to prompt the pictures to be rotated to the next few pictures. At the same time, you can switch the pictures by clicking the small ball.

Realization

First, download the jquery.js package and five pictures in advance. Here we divide the style css and page html into two different files, which is convenient for development.

css

/*Remove default margins*/
*{
    margin: 0;
    padding: 0;
}
/*Zoom the picture*/
img{
    width: 600px;
    height: 400px;
}
/*To locate the absolute father of a child*/
div{
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    /*Outer edge 50px and centered*/
    margin: 50px auto;
    /*Hide out of range*/
    overflow: hidden;
}
ol{
    /*Remove list style*/
    list-style: none;
}
ol li{
    /*Offset from div*/
    position: absolute;
    left: 600px;
}
.cur{
    /*Relative div offset*/
    position: absolute;
    left: 0px;
}

.lbt{
    /*Relative div offset*/
    position: absolute;
    left: 0px;
    top: 50%;
    width: 25px;
    height: 25px;
}
.rbt{
    /*Relative div offset*/
    position: absolute;
    right: 0px;
    top: 50%;
    width: 25px;
    height: 25px;
}
ul{
    /*Relative div offset*/
    position: absolute;
    left: 35%;
    bottom: 10px;
    /*Remove list style*/
    list-style: none;
    height: 25px;
    width: 150px;
}
ul li{
    /*Break document flow, float left*/
    float: left;
    height: 25px;
    width: 25px;
    margin-left: 5px;
    border-radius: 50%;
    /*Text centered*/
    text-align: center;
    background-color: aqua;
    /*Set line height to center text*/
    line-height: 25px;
    /*Modify mouse style*/
    cursor: pointer;
}
.idx{
    background-color: red;
    /*Magnify 1.2 times*/
    transform: scale(1.2);
}

html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<!--    Introduce css style-->
    <link rel="stylesheet" type="text/css" href="css/default.css" />
<!--    Introduce jq package-->
    <script src="jquery/jquery.min.js"></script>
</head>
<body>
    <div>
        <ol>
            <li class="cur"><img src="img/1.jpg"></li>
            <li><img src="img/2.jpeg"></li>
            <li><img src="img/3.jpeg"></li>
            <li><img src="img/4.jpeg"></li>
            <li><img src="img/5.jpeg"></li>
        </ol>
        <button class="lbt">&lt;</button>
        <button class="rbt">&gt;</button>
        <ul>
            <li class="idx">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>
<script>
    //Initial index is 0, rotate from picture 1
    var index = 0;
    //Function: move the current picture right out of the window, and move the previous picture from left to right into the window
    function lbtClick() {
        //eq(n) gets the n+1 tag of ol li
        //css settings style
        //stop(true) prevents animation from accumulating. If there is a trigger currently executing, stop the current animation and start executing a new animation.
        //animate({xxx},time), in time (in ms), change the style to {xxx} style
        $("ol li").eq(index).css({
            "left" : 0
        }).stop(true).animate({
            "left" : 600
        },500);
        index--;
        index = index < 0 ? 4:index;
        $("ol li").eq(index).css({
            "left" : -600
        }).stop(true).animate({
            "left" : 0
        },500);
        //Add class"idx" to the new ul li tag, change its size and color, and remove its sibling's class
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    };
    //Function: move the current picture out of the window to the left, and move the next picture into the window from right to left
    function rbtClick() {
        $("ol li").eq(index).css({
            "left" : 0
        }).stop().animate({
            "left" : -600
        },500);
        index++;
        index = index > 4 ? 0:index;
        $("ol li").eq(index).css({
            "left" : 600
        }).stop(true).animate({
            "left" : 0
        },500);
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    }
    //Binding events for button s
    $(".lbt").click(lbtClick);
    $(".rbt").click(rbtClick);
    //Set scheduled tasks
    var timer = setInterval(rbtClick,2000);
    //Set mouse move in event
    $("div").mouseenter(function () {
        //Clear the timer to make it no longer work
        clearInterval(timer);
    });
    //Mouse remove event
    $("div").mouseleave(function () {
        //Regenerate timer
        timer = setInterval(rbtClick,2000);
    });
    //Mouse click event of lower hoverbar
    $("ul li").click(function () {
        //this is the mouse click label
        var current = $(this).index();
        if (current > index){
            $("ol li").eq(index).css({
                "left" : 0
            }).stop().animate({
                "left" : -600
            },500);
            index = current;
            $("ol li").eq(index).css({
                "left" : 600
            }).stop(true).animate({
                "left" : 0
            },500);
        }else if(current < index){
            $("ol li").eq(index).css({
                "left" : 0
            }).stop().animate({
                "left" : 600
            },500);
            index = current;
            $("ol li").eq(index).css({
                "left" : -600
            }).stop(true).animate({
                "left" : 0
            },500);
        };
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    });
</script>

Development process

html framework development

First of all, we need to make clear the components we need, div form, the list picture of the rotation, the left and right buttons, and the hoverbar list.
First, write the body framework. The picture is the random material on the Internet. class"cur" is the default picture when initializing, and class"idx" is the default subscript.

<body>
    <div>
        <ol>
            <li class="cur"><img src="img/1.jpg"></li>
            <li><img src="img/2.jpeg"></li>
            <li><img src="img/3.jpeg"></li>
            <li><img src="img/4.jpeg"></li>
            <li><img src="img/5.jpeg"></li>
        </ol>
        <button class="lbt">&lt;</button>
        <button class="rbt">&gt;</button>
        <ul>
            <li class="idx">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

Style development

After the framework is written, you can see a document flow page without style when the page is running. At this time, we need to write the style of the whole body to generate a static page that can be seen. Note: don't forget to import external styles with link tags.

/*Remove default margins*/
*{
    margin: 0;
    padding: 0;
}
/*Zoom the picture*/
img{
    width: 600px;
    height: 400px;
}
/*To locate the absolute father of a child*/
div{
    position: relative;
    width: 600px;
    height: 400px;
    border: 1px solid black;
    /*Outer edge 50px and centered*/
    margin: 50px auto;
    /*Hide out of range*/
    overflow: hidden;
}
ol{
    /*Remove list style*/
    list-style: none;
}
ol li{
    /*Offset from div*/
    position: absolute;
    left: 600px;
}
.cur{
    /*Relative div offset*/
    position: absolute;
    left: 0px;
}

.lbt{
    /*Relative div offset*/
    position: absolute;
    left: 0px;
    top: 50%;
    width: 25px;
    height: 25px;
}
.rbt{
    /*Relative div offset*/
    position: absolute;
    right: 0px;
    top: 50%;
    width: 25px;
    height: 25px;
}
ul{
    /*Relative div offset*/
    position: absolute;
    left: 35%;
    bottom: 10px;
    /*Remove list style*/
    list-style: none;
    height: 25px;
    width: 150px;
}
ul li{
    /*Break document flow, float left*/
    float: left;
    height: 25px;
    width: 25px;
    margin-left: 5px;
    border-radius: 50%;
    /*Text centered*/
    text-align: center;
    background-color: aqua;
    /*Set line height to center text*/
    line-height: 25px;
    /*Modify mouse style*/
    cursor: pointer;
}
.idx{
    background-color: red;
    /*Magnify 1.2 times*/
    transform: scale(1.2);
}

Dynamic page generation

We have completed the development of html framework and css style, and got a static page. Now we want to complete the animation function of the carousel chart, add script tags in html, write logic, and pay attention to the use of jQuery must first introduce the package.

    //Initial index is 0, rotate from picture 1
    var index = 0;
    //Function: move the current picture right out of the window, and move the previous picture from left to right into the window
    function lbtClick() {
        //eq(n) gets the n+1 tag of ol li
        //css settings style
        //stop(true) prevents animation from accumulating. If there is a trigger currently executing, stop the current animation and start executing a new animation.
        //animate({xxx},time), in time (in ms), change the style to {xxx} style
        $("ol li").eq(index).css({
            "left" : 0
        }).stop(true).animate({
            "left" : 600
        },500);
        index--;
        index = index < 0 ? 4:index;
        $("ol li").eq(index).css({
            "left" : -600
        }).stop(true).animate({
            "left" : 0
        },500);
        //Add class"idx" to the new ul li tag, change its size and color, and remove its sibling's class
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    };
    //Function: move the current picture out of the window to the left, and move the next picture into the window from right to left
    function rbtClick() {
        $("ol li").eq(index).css({
            "left" : 0
        }).stop().animate({
            "left" : -600
        },500);
        index++;
        index = index > 4 ? 0:index;
        $("ol li").eq(index).css({
            "left" : 600
        }).stop(true).animate({
            "left" : 0
        },500);
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    }
    //Binding events for button s
    $(".lbt").click(lbtClick);
    $(".rbt").click(rbtClick);
    //Set scheduled tasks
    var timer = setInterval(rbtClick,2000);
    //Set mouse move in event
    $("div").mouseenter(function () {
        //Clear the timer to make it no longer work
        clearInterval(timer);
    });
    //Mouse remove event
    $("div").mouseleave(function () {
        //Regenerate timer
        timer = setInterval(rbtClick,2000);
    });
    //Mouse click event of lower hoverbar
    $("ul li").click(function () {
        //this is the mouse click label
        var current = $(this).index();
        if (current > index){
            $("ol li").eq(index).css({
                "left" : 0
            }).stop().animate({
                "left" : -600
            },500);
            index = current;
            $("ol li").eq(index).css({
                "left" : 600
            }).stop(true).animate({
                "left" : 0
            },500);
        }else if(current < index){
            $("ol li").eq(index).css({
                "left" : 0
            }).stop().animate({
                "left" : 600
            },500);
            index = current;
            $("ol li").eq(index).css({
                "left" : -600
            }).stop(true).animate({
                "left" : 0
            },500);
        };
        $("ul li").eq(index).addClass("idx").siblings().removeClass();
    });

summary

So far, we have completed the development of the carousel chart, which combines the development of html, css, js, and introduces the jQuery library. It is very convenient for us to develop through the functions provided by it. This is only a part of the jQuery function. Next, we will learn and consolidate jQuery in depth through another example of the navigation bar.

Published 11 original articles, won praise 6, visited 4745
Private letter follow

Posted by skissiks on Tue, 03 Mar 2020 20:58:21 -0800

Hot Keywords

©2024 Programmer Group