轮播图练习

最新推荐文章于 2024-07-30 23:06:43 发布

周白卿

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量128

点赞数

分类专栏： JavaScript学习笔记文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_51088023/article/details/125989201

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0%;
            padding: 0%;
        }
        #outer{
            width: 620px;
            height: 400px;
            margin: 50px auto;
            background-color: greenyellow;
            padding: 10px 0;
            position:relative;
            overflow: hidden;
        }
        #imgList{
            list-style: none;
            position: absolute;
            left: 0px;
            
        }
        #imgList li{
            float: left;
            margin: 0 10px;
        }
        #navDiv{
            position: absolute;
            bottom: 15px;
        }
        #navDiv a{
            float: left;
            width: 15px;
            height: 15px;
            margin: 0 5px;
            background-color: red;
            opacity: 0.5;
            border: 0px;
            border-radius: 10px;
        }
        #navDiv a:hover{
            background-color: black;
        }
    </style>
    <!-- 引入工具 -->
    <script src="/tools.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            /*--------------------------------设置imgList的宽度-------------------------*/
            //获取imgLIst
            var imgList = document.getElementById("imgList");
            //获取所有图片
            var imgArr = document.getElementsByTagName("img");
            //设置imgList的宽度
            imgList.style.width = imgArr.length*620+"px";
            /*-------------------------------设置导航按钮居中----------------------------*/
            //获取navDiv
            var navDiv = document.getElementById("navDiv");
            //获取outer
            var outer = document.getElementById("outer");
            //设置navDiv的left值
            navDiv.style.left = (outer.offsetWidth-navDiv.offsetWidth)/2+"px";
            /*-----------------------设置默认超链接的样式------------------------------*/
            //设置默认图片的索引
            var index = 0;
            //定义自动切换的定时器标识
            var timeID;
            //获取所有的a
            var alla = document.getElementsByTagName("a");
            //设置默认选中的效果
            alla[index].style.backgroundColor = "black";
            /*--------------------点击超链接切换到指定的图片-----------------------------*/
            //为所有的超链接绑定单击响应函数
            for(var i=0;i<alla.length;i++){
                //为每一个超链接添加一个num属性
                alla[i].num = i;
                alla[i].onclick = function(){
                    //关闭自动切换的定时器
                    clearInterval(timeID);
                    //获取超链接的索引，并设置为index
                    index = this.num;
                    //切换图片
                    move(imgList,"left",-620*index,200,function(){
                        //动画执行完毕，开始自动切换
                        autoChange();
                    });
                    //使a的颜色改变
                    setA();
                };
            }
            /*-----------------------------------自动切换图片-----------------------------*/
            autoChange();
            /*------------------------创建一个方法用来设置选中的a-------------------------*/
            function setA(){
                //判断index是否为最后一张图片的索引
                if(index > alla.length-1){
                    index = 0;
                    //此时显示的是最后一张图片，而最后一张图片和第一张是一样的
                    //通过CSS将最后一张切换成第一张
                    imgList.style.left = 0;
                }
                //遍历所有的a，并将它们的背景颜色设置为红色          
                for(var i=0;i<alla.length;i++){
                    //因为设置的是内联样式，会覆盖css的hover样式，所以设置为空
                    //此时alla[i]的样式为css样式，即红色
                    alla[i].style.backgroundColor = "";
                }
                //设置选中的a颜色变为黑色
                alla[index].style.backgroundColor = "black";
            }
            /*-------------------------创建一个函数用来开启自动切换图片-----------------------*/
            function autoChange(){
                //开启定时器用来切换图片
                timeID = setInterval(function(){
                    //使索引自增
                    index++;
                    //判断index的值
                    index %= imgArr.length;
                    //执行动画切换图片
                    move(imgList,"left",-620*index,50,function(){
                        //修改导航样式
                        setA();
                    });
                },5000);
            }
        };
    </script>
</head>
<body>
    <!-- 创建一个外部div作为容器 -->
    <div id="outer">
        <!-- 创建一个ul用于放置照片 -->
        <ul id="imgList">
            <li>
                <img src="/火影方块/1.webp" width="600px" height="400px">
            </li>
            <li>
                <img src="/火影方块/2.webp" width="600px" height="400px">
            </li>
            <li>
                <img src="/火影方块/3.webp" width="600px" height="400px">
            </li>
            <li>
                <img src="/火影方块/4.webp" width="600px" height="400px">
            </li>
            <li>
                <img src="/火影方块/5.webp" width="600px" height="400px">
            </li>
            <li>
                <img src="/火影方块/6.webp" width="600px" height="400px">
            </li>
            <li>
                <img src="/火影方块/1.webp" width="600px" height="400px">
            </li>
        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>