search

Home >Web Front-end >JS Tutorial >JS loop carousel chart

JS loop carousel chart

韦小宝
韦小宝Original
2017-11-20 11:22:132284browse

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>

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：
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
Previous article：Things to note when using alert() in JavaScriptNext article：Things to note when using alert() in JavaScript

Related articles

See more