JS loop carousel chart-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS loop carousel chart

Nov 20, 2017 am 11:22 AM

javascript cycle

JS Loop carousel pictures can be used for research or in your own projects. JS source code is provided for free ~ to help you learn JS Slightly~

JS loop carousel chart

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP中文网</title>
    <style>
        .container{
            width: 1068px;
            height: 400px;
            margin: 100px auto;
            position: relative;
        }
        .container .img{
            display: inline-block;
            position: absolute;
            transition: all 1s;
            background-size: cover;
        }
        .container .img:after{
            content: "";
            text-align: center;
            position: absolute;
            bottom: -80px;
            height: 1px;
            width: 94%;
            margin: auto 3%;
            box-shadow: 0 0 20px 15px rgba(0, 0, 0, 1);
            opacity: 0.05;
            background-color: #000;
        }
        .img:nth-of-type(1){
            background-image: url(http://www.php.cn/tpl/Index/Static/img/zhibo4.jpg);
        }
        .img:nth-of-type(2){
            background-image: url(http://www.php.cn/tpl/Index/Static/img/banner1.jpg);
        }
        .img:nth-of-type(3){
            background-image: url(http://www.php.cn/tpl/Index/Static/img/banner3.jpg);
        }
        .img:nth-of-type(4){
            background-image: url(http://www.php.cn/tpl/Index/Static/img/banner4.jpg);
        }
        #btnLeft{
            cursor: pointer;
            width: 234px;
            height: 400px;
            position: absolute;
            z-index: 10;
            background-color: rgba(223, 80, 0, 0);
        }
        #btnRight{
            cursor: pointer;
            width: 234px;
            height: 400px;
            position: absolute;
            right: 0;
            z-index: 10;
            background-color: rgba(223, 80, 0, 0);
        }
    </style>
</head>
<body>
<div>
    <span id="btnLeft"></span>
    <span id="btnRight"></span>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
    var img = document.getElementsByClassName("img");
    var num = 40000;//负数求模不好操作，所以给个大数字吧
    function setImg() {
        //求模的方法能让num始终在0-3之间循环
        var numA = num % 4;
        var numB = (num + 1) % 4;
        var numC = (num + 2) % 4;
        var numD = (num + 3) % 4;
        img[numA].style.width = 600 + "px";
        img[numA].style.height = 400 + "px";
        img[numA].style.backgroundColor = "#808080";
        img[numA].style.zIndex = 4;
        img[numA].style.left = 234 + "px";
        img[numA].style.top = 0;
        img[numA].style.opacity = 1;

        img[numB].style.width = 468 + "px";
        img[numB].style.height = 312 + "px";
        img[numB].style.backgroundColor = "#666666";
        img[numB].style.zIndex = 1;
        img[numB].style.left = 0;
        img[numB].style.top = 44 + "px";
        img[numB].style.opacity = 0.6;

        img[numC].style.width = 351 + "px";
        img[numC].style.height = 234 + "px";
        img[numC].style.backgroundColor = "#666666";
        img[numC].style.zIndex = 0;
        img[numC].style.left = 534 + "px";
        img[numC].style.top = 83 + "px";
        img[numC].style.opacity = 0;

        img[numD].style.width = 468 + "px";
        img[numD].style.height = 312 + "px";
        img[numD].style.backgroundColor = "#666666";
        img[numD].style.zIndex = 1;
        img[numD].style.left = 600 + "px";
        img[numD].style.top = 44 + "px";
        img[numD].style.opacity = 0.6;
    }

    setImg();

    window.setInterval(function(){
        num ++;
        setImg()
    },4000);

    document.getElementById("btnLeft").onclick = function () {
        num ++;
        setImg()
    };
    document.getElementById("btnRight").onclick = function () {
        num --;
        setImg()
    };


</script>
</body>
</html>

Copy after login

The above is all the source code of the JS loop carousel chart. Friends who are interested can take it. Research.

Related recommendations:

JS imitation chat page

##js implements background animation splitting

JavaScript native code implements slideshow

The above is the detailed content of JS loop carousel chart. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn