• 71760

    文章

  • 657

    评论

  • 17

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

JS小功能系列4图片轮播综合数字轮播,顺时针逆时针,自动轮播

撸了今年阿里、腾讯和美团的面试,我有一个重要发现.......>>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none
        }

        li {
            list-style-type: none;
        }

        #coural {
            width: 360px;
            height: 200px;
            position: relative;
        }

        #coural .left,
        .right {
            position: absolute;
            top: 40%;
            transform: scale(2, 1.5);
            background: blue;
            color: #fff;
            border-radius: 2px;
        }

        #coural .left {
            left: 10px;
        }

        #coural .right {
            right: 10px;
        }

        #coural .number {
            position: absolute;
            left: 30%;
            top: 80%;
        }

        #coural .number span {
            display: inline-block;
            padding: 5px 10px;
            margin-left: 10px;
            background: #aaa;
            border-radius: 50%;
        }

        #coural .active {
            background: #09f!important;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="coural">
        <div class="img">
            <a href="javascript:;">
                     <img src="./pic/1.jpg">
                 </a>
        </div>
        <div class="left">
            <</div>
                <div class="right">></div>
                <div class="number">
                    <span class="active">1</span>
                    <span>2</span>
                    <span>3</span>
                </div>
        </div>
        <script>
            var span = document.querySelectorAll("#coural  span"),
                arrImg = ["1.jpg", "2.jpg", "3.jpg"],
                // img=document.querySelector("#coural .number  img")无效
                left = document.querySelector("#coural  .left"),
                right = document.querySelector("#coural  .right"),
                img = document.querySelector("#coural  img"),
                coural = document.querySelector("#coural"),
                index = 0;
            //改变数字样式及图片     
            function couralImg(index) {
                img.src = "./pic/" + arrImg[index];
                for (var i = 0, len = span.length; i < len; i++) {
                    span[i].className = "";
                }
                span[index].className = "active";
            }
            //图片轮播方法 
            function interval() {
                stop = setInterval(function () {
                    index++;
                    if (index == arrImg.length) index = 0;
                    couralImg(index);
                }, 1000)
            }
            //执行图片轮播
            interval();
           
            //鼠标移动到图片上时停止图片轮播
            coural.onmouseover = function () {
               clearInterval(stop);
            }
            //鼠标移除图片时开始I图片轮播
            coural.onmouseout = function () {
                interval();
            }
            //数字轮播
            for (var i = 0, len = span.length; i < len; i++) {
                span[i].onmouseover = function () {
                    index = this.innerHTML - 1;
                    couralImg(index);
                }
            }
            //顺时针图片轮播
            right.onclick = function () {
                index++;
                if (index == arrImg.length) index = 0;
                couralImg(index);
            }

            //逆时针图片轮播
            left.onclick = function () {
                index--;
                if (index == -1) index = arrImg.length-1;
                couralImg(index);
            }

        </script>


</body>

</html>


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

欢迎来到梁钟霖个人博客网站。本个人博客网站提供最新的站长新闻,各种互联网资讯。 还提供个人博客模板,最新最全的java教程,java面试题。在此我将尽我最大所能将此个人博客网站做的最好! 谢谢大家,愿大家一起进步!

转载原创文章请注明出处,转载至: 梁钟霖个人博客www.liangzl.com

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤
注册梁钟霖个人博客