JavaScript练习（六）——轮播图

最新推荐文章于 2022-10-07 00:22:57 发布

秃头的毛睿

最新推荐文章于 2022-10-07 00:22:57 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/weixin_45927758/article/details/108629918

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            height: 300px;
            /*设置居中*/
            margin: 0 auto;
            position: relative;
            top: 350px;
            /*背景颜色*/
            background-color: blueviolet;
            padding: 10px 0;
            /*裁剪出溢出的内容*/
            overflow: hidden;
        }

        #imgList {
            list-style: none;
            width: 2000px;
            height: 300px;
            position: absolute;
            left: 0px;
        }

        #imgList li {
            float: left;
        }

        .ShiYin {
            width: 500px;
            height: 300px;
        }

        /*导航栏标签样式*/
        #navDiv {
            position: absolute;
            /*设置位置*/
            bottom: 3px;
            left: 200px;
        }

        #navDiv a {
            width: 15px;
            height: 15px;
            float: left;
            background-color: darkgray;
            /*设置边距*/
            margin: 5px;
            /*设置透明*/
            opacity: 0.6;
        }
        #navDiv a:hover{/*注意a与冒号之间不能有空格*/
            background-color: red;
        }
    </style>
    <script>
        window.onload = function () {
            //获取图片
            //var PicList = document.getElementsByClassName("ShiYin");
            //获取导航点
            var PointArr=document.getElementsByTagName("a");
            //获取列表
            var imgList=document.getElementById("imgList");
            //设置默认选中图片的索引
            var index=0;
            PointArr[index].style.backgroundColor="red";

            for(var i=0;i<PointArr.length;i++){
                PointArr[i].num=i;
                PointArr[i].onclick=function(){
                    index=this.num;/*不明白这里为什么需要这样操作*/
                    setPic();
                }
            }

            autoChange();

            //创建一个函数，来开启自动切换图片
            function autoChange(){
                setInterval(function(){
                    index=(index+1)%PointArr.length;
                    setPic();
                }, 3000);
            }
            //切换图片函数
            function setPic(){
                imgList.style.left=-(index*500)+"px";
                    PointArr[index].style.backgroundColor="red";
                    for(var i=0;i<PointArr.length;i++){
                        if(i!=index){
                            PointArr[i].style.backgroundColor="darkgray";
                        }
                    }
            }
        }
    </script>
</head>

<body>
    <div id="outer">
        <ul id="imgList">
            <li><img src="plmm.jpg" class="ShiYin" /></li>
            <li><img src="slamdunk.jpg" class="ShiYin" /></li>
            <li><img src="zhizunbao.jpeg" class="ShiYin" /></li>
            <li><img src="zhuyin.jpg" class="ShiYin" /></li>
        </ul>
        <!--导航栏标签-->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>

</html>

整个练习中，我熟悉了样式和标签的使用，但是轮播图的效果我还是没有做出来，需要去学习一下move函数的使用，时间紧迫，有时间再更改。

秃头的毛睿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript练习（六）——轮播图

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #outer { width: 5.
复制链接

扫一扫