找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发JS循环轮播图

2018-07-30 分类：JavaScript 阅读(698) 评论(0)

css前端开发基础视频|前端开发面试浏览器兼容性问题|前端开发需要交互

设计图和尺寸标注，注意背后有一张图片，一共4张循环，点击左右的图片可以滚动
循环的实现是用求模的方法，比较简单不用判断和for循环

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发工具 visio:1009属性操作图片切换</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://cdn.attach.qdfuns.com/notes/pics/201710/10/100851i7buc1ea71os8r40.jpg);
        }
        .img:nth-of-type(2) {
            background-image: url(http://cdn.attach.qdfuns.com/notes/pics/201710/10/100508m8x8ht1c49i1t775.jpg);
        }
        .img:nth-of-type(3) {
            background-image: url(http://cdn.attach.qdfuns.com/notes/pics/201710/10/100508bqdd9mmmmfcd95mi.jpg);
        }
        .img:nth-of-type(4) {
            background-image: url(http://cdn.attach.qdfuns.com/notes/pics/201710/10/100508plti7578ml7vitp7.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 class=”container”>
        <span id=”btnLeft”></span>
        <span id=”btnRight”></span>
        <div class=”img”></div>
        <div class=”img”></div>
        <div class=”img”></div>
        <div class=”img”></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>

we前端开发需要具备哪些能力|代码提示的前端开发工具|前端开发视频教学百度网盘

赞(0)
前端开发者 » 前端开发JS循环轮播图
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论