JS 定时器、轮播图

最新推荐文章于 2023-05-18 20:23:20 发布
最新推荐文章于 2023-05-18 20:23:20 发布
阅读量659 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52007481/article/details/114224278
版权

定时器

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        *{
            margin: 0;
        
        }

        #box1{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            position: absolute;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 200px;
        }
    </style>
    <!-- <script src="./JS文件/tools.js"></script> -->
    <script>
        window.onload = function(){
            var btn01 = document.getElementById("btn01");
            var btn02 = document.getElementById("btn02");
            var btn03 = document.getElementById("btn03");
            var btn04 = document.getElementById("btn04");
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");


            btn01.onclick = function(){
                // alert()
                move(box1,"left",800,30);
            };
            btn02.onclick = function(){
                // alert()
                move(box1,"left",0,30);
            };
            btn03.onclick = function(){
                // alert()
                move(box2,"left",800,10);
            };
            btn04.onclick = function(){
                // alert()
                move(box2,"width",800,10,function(){
                    move(box2,"height", 400, 10,function(){
                        move(box2,"top", 0, 10, function(){
                            move(box2,"width",200 , 10);
                           

                        });
                    });
                });
            };
        };
             /*
            创建一个可以执行简单动画的样式
            参数：
                obj 要执行动画的对象
                attr 要执行动画的样式
                target 执行动画的目标位置
                speed 移动速度
                callback 回调函数，这个函数将会在动画执行完毕后执行
        */
        function move(obj,attr, target,speed,callback){
            // 关闭一个定时器
            clearInterval(obj.timer)
            var current = parseInt(getStyle(obj, attr));
            // alert(getStyle(obj, attr))
            if(current > target){
                speed = -speed;
            }
            obj.timer = setInterval(function(){
                var oldValue = parseInt(getStyle(obj, attr));
                var newValue = oldValue + speed;
                // 判断newValue 是否小于target，若小于向左移动
                // 判断newValue 是否大于target，若大于向右移动

                if((speed < 0 && newValue < target) || (speed > 0 && newValue >target)){
                    newValue = target;
                }
                obj.style[attr] = newValue +"px";

                // 设置当变化达到想要效果后停止
                if(newValue == target){
                    clearInterval(obj.timer);
                    
                    // 动画结束后执行回调函数
                    callback && callback();
                }
            },30);
            // 定义一个函数，用来获取指定元素的当前样式
                // obj 要获取样式的名称
                // name 要获取的样式名
            function getStyle(obj ,name){
                // 
                if (window.getComputedStyle){
                    return getComputedStyle(obj, null)[name];

                }
                else{
                    return obj.currentStyle[name];
                }
            };
        };
    </script>
</head>
<body>
    <button id="btn01">点击按钮以后box1向右移动</button>
    <button id="btn02">点击按钮以后box1向左移动</button>
    <button id="btn03">点击按钮以后box2向右移动</button>
    <button id="btn04">测试按钮</button>
    <br><br>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

轮播图

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="../CSS/reset.css">
    <style>
        #outer{
            width: 220px;
            height: 200px;
            margin: 20px auto;
            padding: 10px 0;
            background-color: aqua;
            position: relative;
            overflow: hidden;
        }
        #imgList{
            /* 去除项目符号 */
           /* list-style: none; */
           position: absolute;
           

        }
        #imgList li{
            float: left;
            margin: 0 10px;
        }
        #navDiv{
            position: absolute;
            bottom: 25px;
        
        }
        #navDiv a{
            float: left;
            width: 10px;
            height: 10px;
            background-color: red;
            opacity: 0.6;
            margin: 0 2px;
            border-radius:50%;
            
            

        }
        #navDiv a:hover{
            background-color: black;
        }
    </style>
    <script src="../js/JS文件/tools.js"></script>
    <script>
        window.onload = function(){
            var imgList = document.getElementById("imgList");
            // 获取页面中所有的img标签
            var imgArr = document.getElementsByTagName("img");
            // 设置imgList的宽度
            imgList.style.width = 220*imgArr.length +"px";

            var navDiv = document.getElementById("navDiv");
            var outer = document.getElementById("outer");

            // 设置navDivde left值
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 +"px";

            var index = 0;
            
            var allA = document.getElementsByTagName("a");
            allA[index].style.backgroundColor = "black";
            // 设置点击圆点，切换图片
            for(var i=0; i < allA.length;i++){
                 
                allA[i].num = i;
               
                allA[i].onclick = function(){
                    clearInterval(timer);
                    
                    allA[index].style.backgroundColor = "";
                    // allA[index].style.opacity = "0.6";
                    // 切换图片
                    index = this.num;
                    // imgList.style.left = -this.num*220  + "px";
                    setA();
                    move(imgList, "left", -220*index,20, function(){
                        autoChange();
                    })
                    // 
                    // allA.style.backgroundColor = "red";
                    
                }

            }

            function setA(){
                if(index >= allA.length){
                        index = 0;
                        imgList.style.left = 0  + "px";
                    }
                for (var i = 0; i < allA.length; i++) {
                    if(i == allA.length-1){
                        allA[0].style.backgroundColor = "";
                        allA[index].style.backgroundColor = "black";
                    }
                   allA[i].style.backgroundColor = "";
                    
                }
                allA[index].style.backgroundColor = "black"; 
            };
            var timer;
            // 自动切换
            autoChange();
            // 创建一个函数，用来开启自动切换图片
            function autoChange(){
                // 开启定时器
               timer = setInterval(function(){
                    index++;

                    move(imgList, "left", -220*index,20, function(){
                        setA();
                    })
                    
                },1000)

            };
            



        };
        
    </script>
</head>
<body>
    <div id="outer">
        <ul id="imgList">
            <li><img src="./img/1.jpg"></li>
            <li><img src="./img/2.jpg"></li>
            <li><img src="./img/3.jpg"></li>
            <li><img src="./img/4.jpg"></li>
            <li><img src="./img/5.jpg"></li>
            <li><img src="./img/6.jpg"></li>
            <li><img src="./img/1.jpg"></li>
           
        </ul>
        <div id="navDiv">
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
        </div>
    </div>
</body>
</html>
小鱼干儿♛
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
超详细解释:使用定时器实现轮播图效果(HTML、CSS、JavaScript)
weixin_56296642的博客
10-02 1860
超详细解释使用HTML、CSS、Javascript运用定时器知识实现轮播图效果
JQuery定时器和轮播图
weixin_70676044的博客
10-27 831
这节课应用的知识点主要就是（setInterval:每隔多少毫秒，执行程序）
Javascript定时切换图片的轮播实现
04-18
NULL 博文链接：https://freesky-zh.iteye.com/blog/1851276
js定时器实现图片轮播
weixin_33726313的博客
06-19 496
效果展示如下： setInterval(moverleft,3000);定时器设置为3秒，而且实现图片下方的小圆点序号跟图片对应，点击小圆点也能切换图片。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播的div+css...
JS 定时轮播图
weixin_71133277的博客
07-22 248
JS 定时轮播图
【JavaScript】Js定时器综合应用大全
热门推荐
【敦厚的曹操】的专栏
10-05 2万+
JavaScript(Jquery)中让网页停顿几秒或按时间循环执行（定时器，已解决，可直接执行！） function date_1() { alert('打开网页只执行一次过程函数！'); } function date_2() { alert('每隔3秒循环执行过程函数！'); } // s
js用定时器实现简单轮播图
qq_44604924的博客
08-22 2882
描述：用定时器实现简单轮播图，点击开始按钮，图片开始切换，点击停止按钮，图片停止切换。 js代码如下： <script type="text/javascript"> window.onload = function(){ var arr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"]; var img = document.getElementById("im
纯js实现轮播图(3种轮播图).zip
12-28
纯JavaScript实现的基本轮播图涉及到数组操作、定时器控制、CSS样式改变以及事件监听等技术。开发者需要理解DOM操作，例如通过`getElementById`或`querySelectorAll`获取元素，通过`innerHTML`或`style`属性修改元素...
原生js实现无缝轮播图
10-15
【原生JS实现无缝轮播图】是一种常见的网页动态效果，用于展示一组连续的图片或内容，给用户带来流畅的视觉体验。本文将详细介绍如何利用JavaScript实现这一功能，并提供具体的代码示例。 首先，理解无缝轮播图的...
前端JavaScript实现轮播图效果
04-11
最后，我们需要编写JavaScript代码来实现轮播图的动态切换和交互功能。在`slide.js`文件中，我们可以创建一个定时器来自动切换图片，并添加点击事件来允许用户手动切换。以下是一个基本的实现： ```javascript let ...
使用JS来制作轮播图定时器
weixin_64965154的博客
05-18 1536
这个意思就是我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容这个[i]的意思是素组的下标，因为是动态，所以我们得写i，不能写死。删除之后我们也还需要一个小圆点我们就用到了add是添加的意思，然后我们这个毕竟是轮播图，我们从第一个需要增加，所以我们这里用模板字符串$i+1,JS最新的ES6语法模板字符串。if函数是判断语句，我们这块的意思是如果我们的i已经到了最后一张，那么数组长度就是八，然后会返回来1，这一步必不可少。
JS_定时器轮播图
魂断楼兰的博客
11-30 7555
定时器无限轮播图<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定时器无限轮播图</title> <style type="text/css"> *{ padding:0; m
js实现轮播图（定时器）
fengshengsc的博客
11-09 1724
js轮播实现
js小案例-轮播图（定时器）
Ass12454548的博客
02-03 1887
找几张你喜欢的图片.新建一个HTML页面.给一个div把img放进去加上第一张图片.在div元素的下面新建一个script标签添加效果:这里因为我们要做轮播图，所以我们用定时器定义一个定时器：每1s切换一张图片，一共四张图片,在定时器内声明函数,这里需要定义一个变量 index用来接受图片，把图片的路径赋值给图片的src值，图片每变化一次，我们让 index自增，这里做一个判断当 index 自增到4时，让 index 等于0，这样就可以一直不停地变化下去，达到轮播的效果。
JS实现定时轮播图效果
weixin_57037336的博客
06-14 429
使用超简单的js代码实现轮播图
JS基础-特效篇（定时器）10-轮播图片
weixin_45799003的博客
05-08 141
功能：每隔1秒换一张图片显示！改变current！！ 鼠标好像不太好使了！换了电池也还是反应迟钝！键盘的快捷键也似乎老化很快！我15年买的电脑！21年了！这台电脑跟了我差不多有六年了！希望你能够一直陪我吧！真的很有感情了！I LOVE YOU! 1.效果 2.页面元素 <div id="box"> <div class="left"> <ul> <li class="current"><a href="#
轮播图（JavaScript定时器）
『愚』的博客
11-13 3905
我们在很多网站经常看到的轮播图,基本都有如下功能： 1.图片间隔一定时间自动切换。 2.可以点击下面的图片序号手动切换。 3.鼠标停留在图片上时停止轮播。 先上效果图： 自动轮播功能： 手动切换功能： 悬停停止功能： 完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0;
JS之使用定时器和事件监听实现轮播图切换
qq_41858795的博客
11-12 1001
JS轮播图
用html+css+js写一个定时器轮播图
最新发布
07-16
以下是一个使用HTML、CSS和JavaScript编写的定时器轮播图示例： HTML: ```html ``` CSS: ```css .slideshow-container { position: relative; } .slide { display: none; } .slide img { ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小鱼干儿♛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值