学习笔记：图片轮播

最新推荐文章于 2019-08-13 14:16:13 发布

ZixiangLi

最新推荐文章于 2019-08-13 14:16:13 发布

阅读量406

点赞数

分类专栏： javascript 文章标签： css 动画图片

本文链接：https://blog.csdn.net/ZixiangLi/article/details/53166687

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>homework</title>
    <style>
        body {
            background-color: #DD5F03;
            width: 1349px;
        }

        body>ul {
            width: 1005px;
            position: relative;
            margin-right: auto;
            margin-left: auto;
            padding: 0px;
            height: 331px;
        }

        body>ul>li {
            float: left;
            padding: 0px;
            margin: 0px;
            position: absolute;
            top: 0px;
        ;
            list-style: none;
        }

        .img_control>li {
            opacity: 0;
            transition: all .8s linear;
        }

        .img_control>li:first-child {
            opacity: 1;
        }

        .control {
            clear: both;
            /*overflow: hidden;*/
        }

        .control ul {
            margin: 0px;
            width: 1005px;
            position: relative;
            margin-right: auto;
            margin-left: auto;
            padding: 0px;
            height: 50px;
        }

        .control li {
            margin-left: 1px;
            width: 200px;
            text-align: center;
            height: 50px;
            list-style: none;
            float: left;
            line-height: 50px;
            background-color: #E9A069;
            color: #D23A00;
            font-size: 50px;
        }

        .control li {
            position: absolute;
            bottom: 0px;
            cursor: pointer;
            transition: all .5s linear;
        }

        .control li:nth-of-type(1) {
            height: 80px;
            line-height: 80px;
            left: 0px;
        }

        .control li:nth-of-type(2) {
            left: 201px;
        }

        .control li:nth-of-type(3) {
            left: 402px;
        }

        .control li:nth-of-type(4) {
            right: 201px;
        }

        .control li:nth-of-type(5) {
            right: 0px;
        }    
    </style>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
     </head>

<body>
<ul class="img_control">
    <li class="img_li"><img src="C:\Users\Administrator\Desktop\DEMO\Image Carousel\1.png" /></li>
    <li class="img_li"><img src="C:\Users\Administrator\Desktop\DEMO\Image Carousel\2.png" /></li>
    <li class="img_li"><img src="C:\Users\Administrator\Desktop\DEMO\Image Carousel\3.png" /></li>
    <li class="img_li"><img src="C:\Users\Administrator\Desktop\DEMO\Image Carousel\4.png" /></li>
    <li class="img_li"><img src="C:\Users\Administrator\Desktop\DEMO\Image Carousel\5.png" /></li>
</ul>
<div class="control">
    <ul>
        <li><i class="fa fa-mobile-phone"></i></li>
        <li><i class="fa fa-mobile-phone"></i></li>
        <li><i class="fa fa-mobile-phone"></i></li>
        <li><i class="fa fa-mobile-phone"></i></li>
        <li><i class="fa fa-mobile-phone"></i></li>
    </ul>
</div>
</body>
<script>

下面是两个闭包：

    var time2;
    (function () {
        var timer=autoLunbo(0);
        document.querySelectorAll('.control>ul>li').forEach(function (element, index) {
            element.addEventListener('click', function (e) {
                console.log(document.querySelectorAll('.img_control>li').length)
                for (var i = 0; i < document.querySelectorAll('.img_control>li').length; i++) {
                    document.querySelectorAll('.img_control>li')[i].style.opacity = "0";
                }
                document.querySelectorAll('.img_control>li')[index].style.opacity = "1";
                for (var i = 0; i < document.querySelectorAll('.control>ul>li').length; i++) {
                    document.querySelectorAll('.control>ul>li')[i].style.height = "50px";
                    document.querySelectorAll('.control>ul>li')[i].style.lineHeight = "50px";
                }
                document.querySelectorAll('.control>ul>li')[index].style.height = "80px";
                document.querySelectorAll('.control>ul>li')[index].style.lineHeight = "80px";
                clearInterval(timer);
                clearInterval(time2);
                time2=autoLunbo(index + 1);
            })
        });
    })()


    function autoLunbo(ind) {
        var timer=setInterval(function () {
         ind = ind > 4 ? 0 : ind;
            for (var i = 0; i < document.querySelectorAll('.img_control>li').length; i++) {
                document.querySelectorAll('.img_control>li')[i].style.opacity = "0";
            }
            document.querySelectorAll('.img_control>li')[ind].style.opacity = "1";
            for (var i = 0; i < document.querySelectorAll('.control>ul>li').length; i++) {
                document.querySelectorAll('.control>ul>li')[i].style.height = "50px";
                document.querySelectorAll('.control>ul>li')[i].style.lineHeight = "50px";
            }
            document.querySelectorAll('.control>ul>li')[ind].style.height = "80px";
            document.querySelectorAll('.control>ul>li')[ind].style.lineHeight = "80px";
            ind++;
            ind = ind > 4 ? 0 : ind;
        }, 1000);
        return timer;
    }
</script>

</html>

ZixiangLi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记：图片轮播

homework body { background-color: #DD5F03; width: 1349px; } body>ul { width: 1005px; position: relative; margi
复制链接

扫一扫