模拟苹果官网轮播图

最新推荐文章于 2022-12-12 11:17:48 发布

第一千行代码

最新推荐文章于 2022-12-12 11:17:48 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/y75475/article/details/69230363

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*body,html{*/
        /*height: 3000px;*/
        /*width: 3000px;*/
        /*}*/
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .wrap {
            position: relative;
            width: 800px;
            height: 400px;
            border: 2px solid plum;
            margin: 100px auto;
        }

        .wrap li {
            width: 100%;
            height: 100%;
        }

        .wrap li img {
            width: 100%;
            height: 100%;
        }

        .hide {
            display: none;
        }

        .left, .right {
            width: 30px;
            height: 80px;
            line-height: 80px;
            background: rgba(235, 235, 235, 0.3);
            top: 160px;
            text-align: center;
            cursor: pointer;
            position: absolute;

        }

        .left {
            float: left;
        }

        .right {
            left: 770px;
            float: right;
        }

        .ico {
            position: absolute;
            right: 10px;
            bottom: 20px;
        }

        .ico p {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 1px solid orange;
            float: left;
            text-align: center;
            line-height: 20px;
            margin-left: 5px;
        }

    </style>
</head>
<body>

<ul class="wrap">
    <li><img src="./images/bg1.png" alt=""/></li>
    <li class="hide"><img src="./images/bg2.png" alt=""/></li>
    <li class="hide"><img src="./images/bg3.png" alt=""/></li>
    <li class="hide"><img src="./images/bg4.png" alt=""/></li>
    <li class="hide"><img src="./images/bg5.png" alt=""/></li>
    <div class="left">&lt;</div>
    <div class="right">&gt;</div>
    <div class="ico">
        <p>1</p>

        <p>2</p>

        <p>3</p>

        <p>4</p>

        <p>5</p>
    </div>
</ul>
<script type="text/javascript">
    var lis = document.getElementsByTagName('li');
    var ps = document.getElementsByClassName('ico')[0].getElementsByTagName('p');
    var num = 0;
    var timer;
    change(lis, num);//传参，初始化 当前第num个li显示 ，其余隐藏
    function change(obj, inx) {
        clearInterval(timer);
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.display = 'none';
        }
        lis[inx].style.display = 'block';
        document.getElementsByClassName('right')[0].onclick = function () {
            num++;
            //如果当图片的角标值等于Li的长度。从头开始
            if (num == lis.length) {
                num = 0;
            }
            change(lis, num);
        }
        //当鼠标经过的时候
        for (var j = 0; j < ps.length; j++) {
            ps[j].index = j;
            ps[j].onmouseover = function () {

                //num的值等于当前事件对象ico的内容数值减1
                num = this.innerHTML - 1;
                this.style.background = 'orange';
                this.style.cursor = 'pointer';
                change(lis, num);
            }
            //和ico元素对应角标的图片显示出来；
            //挡鼠板离开的时候  颜色 恢复为白色
            ps[j].onmouseout = function () {
                this.style.background = 'white';
            }
        }
        //设置一个定时器，让图片自动轮播
        timer = setInterval(function () {
            change(lis, num);
            num++;
            //当Num大于等于图片的length的时候又从第一张开始
            if (num == lis.length) {
                num = 0;
            }
        }, 2000)
    }

</script>
</body>
</html>

第一千行代码

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
模拟苹果官网轮播图

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*body,html{*/ /*height: 3000px;*/ /*width: 3000px;*/ /*}*/
复制链接

扫一扫