Graphique carrousel de boucle JS-js tutoriel-php.cn

Graphique carrousel de boucle JS

韦小宝

Libérer： 2017-11-20 11:22:13

original

2312 Les gens l'ont consulté

JS Graphique carrousel en boucle, vous pouvez l'utiliser pour la recherche ou l'utiliser dans vos propres projets. Le code source JS est fourni gratuitement ~ pour vous aider à apprendre . JS ~

Graphique carrousel de boucle JS

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>

Copier après la connexion

Ce qui précède est tout le code source du graphique carrousel de boucle JS Les amis intéressés peuvent le prendre et l'étudier.

Recommandations associées :

Page de discussion d'imitation JS

JS implémente le fractionnement de l'animation en arrière-plan

Le code natif JavaScript implémente le diaporama

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!