JavaScript实现轮播图+定时器函数阐述

最新推荐文章于 2024-04-13 17:28:35 发布
最新推荐文章于 2024-04-13 17:28:35 发布
阅读量451 收藏 7
点赞数 10
分类专栏： 前端学习 文章标签： javascript css css3 前端 html vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46041602/article/details/135823176
版权

JavaScript实现轮播图+定时器函数阐述

JavaScript实现轮播图效果

代码段

<!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>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }
 
    .slider-wrapper {
      width: 100%;
      height: 320px;
    }
 
    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }
 
    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }
 
    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }
 
    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }
 
    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }
 
    .slider-footer p {
      margin-top: -10px;
      color: #fff;
      font-size: 18px;
      /*margin-bottom: 10px;*/
    }
 
    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }
 
    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }
 
    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>
 
<body>
  <div class="slider">
    <div class="slider-wrapper" onmouseover="over()" onmouseleave="leave()">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev"><</button>
        <button class="next">></button>
      </div>
    </div>
  </div>
  <script>
    // const arr = [1, 3]
    // arr[0]
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const footer = document.querySelector('.slider-footer')
    let i=0
    //设置定时
    function fn(){
    i++//**放置末尾会导致第一张轮播图显示时间几乎等于间隔时间*2。原因是由于轮播图页面初始设置为第一张，定时器函数设定需要间隔设置的时间后第一次执行定时函数，故第一张轮播图显示时间=初始(显示一个间隔时间)+i=0时显示时间(i=0时也是第一张轮播图，第一张轮播显示结束才显示第二张即自增后i=1)** 
    if(i>7){
      i=0
    }
    document.querySelector(`.slider-indicator .active`).classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add('active')
    /*const nli=document.querySelectorAll(`.slider-indicator li:not(:nth-child(${i+1}))`)
    for(let j=0;j<nli.length;j++){
    nli[j].classList.remove('active')
    }
    以上代码可以替换document.querySelector(`.slider-   indicator .active`).classList.remove('active')，位置在函数体内可以随意放置。当然不替换更显得简单一点，只是提供一种思路。
    */
    
    img.src = sliderData[i].url
    p.innerHTML = sliderData[i].title
    footer.style.backgroundColor = sliderData[i].color
    
    
    }
    /*实现鼠标光标放置图片上方停止切换轮播图的效果*/
    let n=setInterval(fn,1000)
    function over(){
      clearInterval(n)
    }
    /*实现鼠标光标离开图片上方继续切换轮播图的效果*/
    function leave(){
      n=setInterval(fn,1000)
    }
  </script>
</body>
 
</html>

轮播图图片

slider01.jpg
slider01.jpg
slider02.jpg
在这里插入图片描述

slider03.jpg
在这里插入图片描述

slider04.jpg
在这里插入图片描述

slider05.jpg
在这里插入图片描述

slider06.jpg
在这里插入图片描述

slider07.jpg
在这里插入图片描述

slider08.jpg
在这里插入图片描述

定时器函数

概念：可以在间隔一段时间重复执行代码的函数。
语法：

开启定时器函数
setInterval(fn/*需要重复执行的函数，不需要在函数名加()*/,1000//单位是ms，已知1s=1000ms)
let n=setInterval(fn,1000)//赋值给n，方便关闭定时器函数
关闭定时器函数
clearInterval(n)
继续定时器函数
n=setInterval(fn,1000)//之前开启已经声明n，不需要重复声明

注意事项：定时器函数在第一次执行执行重复执行函数前，会间隔设置的时间。

森哥呢
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js01 轮播图 定时器
m0_50985936的博客
12-07 107
js-定时器事件 开始定时 myTime = setInterval ( function () { },1000) 清楚定时 clearInterval (myTime) 例如：在script中编写提下代码 获得定时器对象 在body中写执行操作 把定时器事件用在轮播图中 在body放四张图片 通过style， 刚开始只展示第一张地张图片，其他几张不展示 遍历所有图片，（每次之便利一个，其他隐藏） 先获取对象 m是当前展示的是第几张图片 （m=0~4） ...
js图片自动切换（定时器），简单轮播
qq_45219069的博客
07-01 2149
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190701183328470.PNG) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放
最新发布
2401_84150046的博客
04-13 1164
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
轮播图自动播放—定时器版本
qq_61453210的博客
10-09 352
在Javascript中定时器是利用间歇函数实现重复执行代码。定时器函数主要通过开启定时器函数和关闭定时器函数。开启定时器函数：setInterval(函数，间隔时间)，其中的间隔时间为毫秒，1秒=1000毫秒。作用：每一一段时间调用该函数。其中定时器返回的是一个id数字（主要用于关闭定时器）。setInterval(function(){console.log('一秒执行一次')}, 1000)关闭定时函数：clearInterval(变量名)。
JS 定时器笔记(缓动、轮播)
weixin_43889695的博客
08-15 215
循环执行 setInterval(function() {} , 1000) //这个方法就是循环执行的方法，1000指1000毫秒， //每1000毫秒执行一次函数体里面的语句4399 当有一个事件 需要绑定一个定时器时，需要 先清除后设置，以避免定时器的叠加 clearInterval() //清除定时器 setTimeout() //一次定时器 ...
JS实战轮播图详细代码
一步一个脚印，踏实努力，向着目标前进
06-12 4030
这个例子实现了一个简单的轮播图，通过CSS设置轮播图的样式、布局，通过JS实现轮播图的切换、导航等功能。可以根据实际需求进行修改和扩展。
前端JavaScript实现轮播图效果
04-11
使用HTML+CSS+JavaScript实现轮播图效果，可以自动切换，有完整的点击事件。所有代码都有详细注释，适合初学者参考。
JavaScript实现轮播特效 + 二级菜单效果（代码）
10-01
JavaScript实现轮播特效 + 二级菜单效果（代码），资源整全。 - Lux_Sun CSDN Blog：https://blog.csdn.net/Dream_Weave
详解JavaScript实现动态的轮播图效果
10-17
主要介绍了JavaScript实现动态的轮播图效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JavaScript实现轮播图效果代码实例
10-16
主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
轮播图[javascript+html+css]
01-18
该轮播图资源就是我以前发过的“仿淘宝中心轮播图 JS[代码+详细讲解+效果图]”文章的所有资源。文章在下方链接： https://blog.csdn.net/weixin_52258054/article/details/124577699?spm=1001.2014.3001.5501 1.该...
使用JS来制作轮播图定时器
weixin_64965154的博客
05-18 1429
这个意思就是我们可以使用 document.getElementById(‘ xx ’).innerHTML 来获取指定标签内的html内容这个[i]的意思是素组的下标，因为是动态，所以我们得写i，不能写死。删除之后我们也还需要一个小圆点我们就用到了add是添加的意思，然后我们这个毕竟是轮播图，我们从第一个需要增加，所以我们这里用模板字符串$i+1,JS最新的ES6语法模板字符串。if函数是判断语句，我们这块的意思是如果我们的i已经到了最后一张，那么数组长度就是八，然后会返回来1，这一步必不可少。
JS 轮播图 图片切换（定时器）
热门推荐
qq_38318589的博客
08-13 4万+
JS 轮播图 图片切换（定时器） 这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。 上次的图片切换的链接：https://blog.csdn.net/qq_38318589/article/details/99050117
JavaScript之手把手教你做轮播图，2024阿里、网易、京东等大厂最新前端面试题
2401_83621661的博客
03-30 621
这么做。
JS无缝轮播图(支持点击左右切换，小圆点切换，定时器自动播放)
李某人的博客
12-15 1211
JS无缝轮播图
js小案例-轮播图（定时器）
lcszz0302的博客
12-05 7604
大家对于实现轮播图都有什么办法呢？ 今天我来介绍一种方法 用JS来实现 1.找几张你喜欢的图片 2.新建一个HTML页面 3.在body里面先添加一张图片 把图片的id值设为img1，同学们可以随便设置，宽高等可以根据自己的喜好来 <img id="img1" src="../img/banner_1.jpg" height="400" width="1500"/> 4.在body的下面新建一个script标签 这里因为我们要做轮播图，所以我们用循环定时器 定义一个循环定时器：每2s切换一张图
使用JS定时器完成轮播图效果
qiuqiuqiuqiuqiuq的博客
12-15 1629
@[T使用JS定时器完成轮播图效果OC] window.addEventListener(‘load’, function() { // 1. 获取元素 var arrow_l = document.querySelector(’.arrow-l’); var arrow_r = document.querySelector(’.arrow-r’); var focus = document.qu...
js（setInterval）定时器和for循环的综合应用（轮播图）
XinYe666666的博客
06-09 5512
效果图（鼠标移开时，图片自动切换，移入时，停止切换；鼠标放入左右箭头那，背景变白，箭头变红变为鼠标手且内角从120度变为90度，点击可以切换图片右下一张左上一张；鼠标移入下面相应的数字变换为相应的图片且背景变蓝变为鼠标手。）head部分：*{margin: 0;padding: 0} .box{ width: 600px; height: 400px; border: 1p...
html+javascript实现轮播图效果
06-07
好的，以下是一个简单的HTML+JavaScript轮播图效果的实现： HTML代码： ```html <button id="prevBtn">Prev <button id="nextBtn">Next ``` CSS代码： ```css .slider { position: relative; width: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值