定时器实现轮播图

最新推荐文章于 2023-04-10 17:36:19 发布

one or two

最新推荐文章于 2023-04-10 17:36:19 发布

阅读量1.8k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_41633396/article/details/118147291

版权

小练习

自写代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器来实现轮播图</title>
    <style>
        #box1 {
            width: 300px;
            height: 300px;
            border: 1px red solid;
            /* overflow:hidden; */
        }

        #imgList {
            width: 100%;
            /* height:100%; */
        }
    </style>
    <script>
        window.onload = function () {
            // 创建获取id属性DOM的对象的函数
            function getDOMObj(obj) {
                var getObj = document.getElementById(obj);
                return getObj;
            }

            //创建响应函数
            function callback() {
                if (this == btn01) {
                    // console.log("进入了if判断");

                    clearInterval(timer);

                    // 这里写上window.timer是为了满足需要，让timer成为全局变量
                    timer = setInterval(function () {
                        console.log(timer);
                        index++;
                        if (index >= imgArr.length) {
                            index = 0;
                        }
                        imgList.src = imgArr[index];
                    }, 2000)
                }else{
                    console.log("进入else判断了吗？");
                    // console.log(timer);
                    clearInterval(timer);
                    // console.log(timer);
                }

            }

            function responseFunction(DOMObj, eventString) {
                DOMObj.addEventListener(eventString, function () {
                    callback.call(DOMObj);
                }, false);
            }

            imgList = getDOMObj("imgList");

            // 定义一个数组，来保村图片地址
            imgArr = ["./图片/1.jpg", "./图片/2.jpeg", "./图片/3.jpg", "./图片/4.jpg", "./图片/5.jpg"];
            var index = 0;
            var timer;
            // 获取开始按钮的DOM对象
            var btn01 = getDOMObj("btn01");
            responseFunction(btn01, "click");

            // 获取暂停按钮的DOM对象
            var btn02 = getDOMObj("btn02");
            responseFunction(btn02, "click");
        }
    </script>
</head>

<body>
    <div id="box1">
        <img src="./图片/1.jpg" id="imgList">
        <br>
        <br>
        <button id="btn01">开始</button>
        <button id="btn02">暂停</button>
    </div>
</body>

</html>

但是，上面写的代码，没法去实现不同大小的图片，放在同一个div(固定高和宽的情况下)，仍然，能够实现图片的自适应，不变形，能够铺满div的大小

此练习，需要注意以下几点

注意理解下面图片中的，在开启的定时器之前，需要将“当前元素上的其它的定时器关掉”,注意这个当前是相对于同一个元素来说的，否则，在本题中，btn01每被点击一次，就会开启一个定时器，但是，关的时候，只能关最后一个定时器

在这里插入图片描述

视频源代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使图片可以自动切换
				 */
				
				//获取img标签
				var img1 = document.getElementById("img1");
				
				//创建一个数组来保存图片的路径
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				
				//创建一个变量，用来保存当前图片的索引
				var index = 0;
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//为btn01绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					/*
					 * 目前，我们每点击一次按钮，就会开启一个定时器，
					 * 	点击多次就会开启多个定时器，这就导致图片的切换速度过快，
					 * 	并且我们只能关闭最后一次开启的定时器
					 */
					
					//在开启定时器之前，需要将当前元素上的其他定时器关闭
					clearInterval(timer);
					
					/*
					 * 开启一个定时器，来自动切换图片
					 */
					timer = setInterval(function(){
						//使索引自增
						index++;
						//判断索引是否超过最大索引
						/*if(index >= imgArr.length){
							//则将index设置为0
							index = 0;
						}*/
						index %= imgArr.length;
						//修改img1的src属性
						img1.src = imgArr[index];
						
					},1000);
				};
				
				//为btn02绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//点击按钮以后，停止图片的自动切换，关闭定时器
					/*
					 * clearInterval()可以接收任意参数，
					 * 	如果参数是一个有效的定时器的标识，则停止对应的定时器
					 * 	如果参数不是一个有效的标识，则什么也不做
					 */
					clearInterval(timer);
					
				};
				
				
			};
			
		</script>
	</head>
	<body>
		
		<img id="img1" src="img/1.jpg"/>
		<br /><br />
		<button id="btn01">开始</button>
		<button id="btn02">停止</button>
	</body>
</html>