Rumah > Artikel > hujung hadapan web > JS循环轮播图

JS循环轮播图

韦小宝asal: 2017-11-20 11:22:132246semak imbas

JS循环轮播图，可以拿去研究也可以放在自己的项目中使用，免费提供JS源码~帮助你们学习JS咯~

OKZ7FX$_1(GXDO3MCL1C8CF.png

代码：

<!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模仿聊天页面

js实现背景动画分裂

JavaScript原生代码实现幻灯片

Atas ialah kandungan terperinci JS循环轮播图. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript中alert()使用的注意事项Artikel seterusnya：jquery标题选择动画

Artikel berkaitan

Lihat lagi