ホームページ > 記事 > ウェブフロントエンド > JSループカルーセルチャート

JSループカルーセルチャート

韦小宝オリジナル: 2017-11-20 11:22:132236ブラウズ

JSサイクルカルーセルチャートは、学習したり、独自のプロジェクトで使用したりできます。JS〜

JSループカルーセルチャート

の学習に役立つように、

JSのソースコードが無料で提供されています。

<!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>

以上がJSループカルーセルのソースコードです。興味のある方は勉強に使ってください。

JSループカルーセルチャート

関連記事