开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js焦点图代码

以下是一个使用原生 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">
  <style>
    .slider {
      position: relative;
      width: 500px;
      height: 300px;
      overflow: hidden;
    }

   .slider img {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

   .slider img.active {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <img src="image1.jpg" alt="Image 1" class="active">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>

  <script>
    const images = document.querySelectorAll('.slider img');
    let currentIndex = 0;

    function showNextImage() {
      images[currentIndex].classList.remove('active');
      currentIndex = (currentIndex + 1) % images.length;
      images[currentIndex].classList.add('active');
    }

    setInterval(showNextImage, 3000);
  </script>
</body>

</html>

基础概念：

通过 CSS 设置图片容器的样式，使其只显示一张图片，并设置图片的绝对定位和过渡效果。
使用 JavaScript 获取所有的图片元素，并通过定时器来控制显示下一张图片。

优势：

不依赖任何第三方库，加载速度快。
实现简单，易于理解和修改。

类型：

基于定时器的自动切换焦点图。
可以添加鼠标悬停暂停切换的功能。

应用场景：

网站首页的轮播广告展示。
产品介绍页面的图片展示。

可能出现的问题及解决方法：

图片加载失败：检查图片路径是否正确。
切换不流畅：优化 CSS 过渡效果的时间和属性。

如果想要添加更多的功能，比如手动切换按钮、导航点等，可以进一步扩展代码。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js焦点轮播图

汇集网上焦点轮播图的实现方式，自己试了下，不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效，不太明白，最后两行代码中，为什么可以直接写stop和play。不用加括号调用函数么？求懂的大神指点！...所用知识点： 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法(可以用js实现一个假图的制作。

12.4K13 0

input获取焦点原生js_原生js的input事件

1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。...3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。...onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中 8.oninput 当input的value值发生变化时就会触发，(与onchange的区别是不用等到失去焦点就可以触发了...) 使用方法：以上事件可以直接放到input的属性里，例如： 1 ，可以通过js给input dom元素添加相应的事件， 2 document.getElementByTagName(‘input’

25.8K6 0

JS实现焦点图轮播效果

还有一个问题需要注意，此焦点图轮播器其实只有五张图，但是在id为list的div里却放了七张图，这是为啥呢？...所以当轮播到第五张图片(5.jpg)的时候，再进行向右切换的时候，这时最后一张图片被切换进来，此时left值已经为-3600px，并且同时我们又将其left值改为-600px，这样就回到了真正的第一张图。...好了，最重要的还是JS实现轮播效果：首先来实现最简单的通过左右按钮来实现切换： window.onload = function () { var container = document.getElementById...OK，整理一下代码： window.onload = function () { var container = document.getElementById('container');

15.2K6 1

JS-使用定时器实现焦点图

需求定时器每秒切换一张图片以及图片上的内容效果代码焦点图...style> 图的描述信息...{ i++ if (i === 8) { i = 0 } // 默认图是第一张

6.8K4 0

原生JS实现轮播图

分享一个用原生JS实现轮播图特效，效果如下：以下是代码实现，详情请看注释：普通轮播图 <style...arr.children[1];//操作的箭头 var imgWid = screen.offsetWidth; // 1.总体分为两部分: // 2.实现简单轮播图：...点击按钮变色，list的运动 // 3.点击按钮变色：根据图片个数创建按钮,实现变色 // 4.左右焦点图：移入移出显示隐藏，点击运动 // 5.点击运动

8.7K2 0

原生JS实现呼吸轮播图

今天给大家分享一个用原生JS实现的呼吸轮播图，效果如下：以下是代码实现，欢迎大家复制粘贴。原生JS实现呼吸轮播图 ...{ background-color: red; } js...javascript:;"> > 以下是上面代码中引入的最重要的运动函数...move.js的代码： function startMove(obj, json, fnEnd) { clearInterval(obj.timer); obj.timer = setInterval

8.8K1 0

原生JS实现腾讯视频轮播图

给大家分享一个用原生JS实现的腾讯视频轮播图特效，实现效果如下：以下是代码实现，欢迎大家复制粘贴。原生...JS实现腾讯视频轮播图 js/move.js"> 下面的代码是以上代码中引入的封装运动函数...move.js代码。

16.4K2 0

失去焦点和获得焦点发生事件(js)

失去焦点 : οnblur=”hanshu(this)” 获得焦点: οnfοcus=”hanshu(this)” { alert(‘请确认您输入格式是否正确！

9K8 0

第42天：焦点图

1、焦点图 1 2 3 4 5 焦点图</title...ul.style.left=leader+"px"; 98 },30); 99 100 101 102 运行效果： 2、左右焦点图...DOCTYPE html> 2 3 4 5 左右轮播图</title

7631 0

作业-原生js完成轮播图与悬停

代码亮点：增加图片时，你只需要再加一个li就可以了。不需要改动其他任何代码。完整代码直接看文章结尾！首先我们看一下需求 ?...下面我们进入js实现功能的环节。 js 我们先简单构思一下如何让图片自动轮播假设我们现在有一个定时器，我们传入一个功能，他可以自动切换图片的名称。...下面我们先将图片和列表在js中获取， var lis = document.getElementsByTagName("li"); var img = document.getElementById("...怎么让它悬停在列表12345的时候停止呢,很简单,我们在列表中绑定一个函数,让它停止即可,这里为了代码简洁,我们直接集成到chose函数中即可....=1){ lis[i-2].className = "cout"; } 此时js的完整代码为 <script type

8K3 1

轮播图-滑动图片标题焦点

这个布局和上面的ViewPager底部对齐layout_alignBottom=”@id/xxx” 居中显示，小点部分，先放过空的LinearLayout，id是ll_points在代码中对其进行填充...添加尺寸节点，设置宽度，高度，android:width=”” android:height=”” 添加颜色节点，设置颜色 android:color=”” 正常情况下，灰色点，焦点的时候...setEnabled()方法，设置是否可用，参数：布尔值获取LinearLayout对象，调用LinearLayout对象的addView()方法，把小图标的视图填进去，参数：ImageView对象默认第一个是焦点...，随着图片滑动，焦点跟着改变 package com.tsh.myviewpager; import java.util.ArrayList; import java.util.List; import

2.7K1 0

原生JS实现韩雪冬轮播图

分享一个用原生JS实现的韩雪冬轮播图，效果如下：实现代码如下：原生JS实现韩雪冬轮播图...javascript:;" class="next" id="arrRight"> js.../index.js"> // 标注了每个图片要运动到的位置 // config其实就是一个配置单规定了每张图片的大小位置层级透明度...var flag = true; arrRight.onclick = function () { // 如果flag 值为true，这时可以执行代码

5.8K2 1

原生js实现简单移动端轮播图

最近项目不是很忙，自己就用原生js写了一个简单的移动端轮播图的小demo，可实现自动轮播和手势滑动轮播，然后就把它记录到个人博客里。还有很多不足的地方，希望多多指出，以便改进。...1、代码部分分为四个文件：　　slideshow.html 　　slideshow.css 　　base.js 　　slideshow.js 1.1、slideshow.html 移动端-轮播图 js..."> js"> 1.2、slideshow.css *, ::before, ::after

20.7K6 0

原生js实现淡入淡出轮播图效果

下面为原生js写出来的轮播图淡入淡出效果，源代码能够正确运行。 1.效果展示 2.源代码 swiper.html 轮播图js"> swiper.js...renderImg(); }); // 轮播图渲染图片 function renderImg() { $(".swiper-wrap img") .eq(current) .

1751 0

JavaScript 技术篇 - js 查看哪个元素获取了焦点，js 指定元素获取焦点方法

查看焦点元素通过 document.activeElement 可以获取哪个元素获取到了焦点。如图所示，我的光标在这个查询框里。 ? 可以获取到该元素。 ?...使指定元素获取焦点 focus() 方法可以使某个元素获取焦点。如图，我把输入框的这个元素存到变量 e 里面。 ?...然后手动把焦点指到别的元素上，再通过 focus() 方法让查询框重新获取焦点。可以看到焦点获取成功了。 ?

16.5K2 0

原生JS-根据数据生成柱形图

需求：用户输入四个季度的数据，可以生成柱形图。...效果图分析需要输入4次，所以可以把4个数据放到一个数组里面利用循环，弹出4次框，同时存到数组里面使用 var div1 = document.getElementById('one...代码根据数据生成柱状图<

9244 0

js自动绑定焦点到指定textbox，

其实这就是js开发中焦点的处理，但是要实现这个功能真的没那么简单，并非用.Focus那么简单的，你会发现不管用C#来进行后来的焦点定位 – this.txtSerialNumber.Focus();，还是前台的...js焦点定位都不行。...在高手的QQ群里问了多次，都没有很好地答案，最后在这里找到了解决办法：《[URL=http://wangye.org/blog/archives/150/]JavaScript让登录或搜索文本框自动获得焦点

4.4K1 0

第54天：原生js实现轮播图效果

一、轮播图的原理：一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。 ?...当你从最后一张图切换回第一张图时，有很大空白，利用两张辅助图来填补这个空白。这里补充下无缝滚动，直接看代码，复制最后一张图片放置第一张图片前，同时复制第一张图片放置最后一张图片的后面。...并且，将第一张图片辅助图（实际上是实际显示的第5张图片隐藏起来，故设置style="left: -600px;"）三、CSS修饰 1、对盒子模型，文档流的理解，绝对定位问题。...#prev { left: 20px; } #next { right: 20px; } 四、Js...轮播图，顾名思义，是自己会动的图片，这个时候我们需要用到浏览器的内置对象定时器。对于定时器，有必要说明一下setInterval()跟setTimeout的区别了。

6.7K2 1

第58天：简单焦点轮播图

一、轮播图无缝滚动 1、获取元素，动态生成节点 2、匀速运动动画 3、调用动画函数 4、添加定时器，自动播放 1 <!...添加定时器 86 var timer = null; // 轮播图的定时器 87 var key = 0; //控制播放张数 88 var square...= 0; // 控制小方块 89 timer = setInterval(autoplay,1000); // 开始轮播图定时器 90 function...box.onmouseout = function() { 115 timer = setInterval(autoplay,1000); // 开始轮播图定时器

1.2K3 0

【说站】js中有哪些焦点事件

js中有哪些焦点事件 1、blur当元素失去焦点时触发。事件不会冒泡，所有浏览器都支持。 2、focus当元素获得焦点时触发。事件不会冒泡，所有浏览器都支持。...实例 // 焦点事件：模拟输入框的placeholder功能 var oInput1 = document.getElementById("input1"); oInput1.... oInput1.onblur = function () { oInput1.value = "请输入内容"; }; //oInput1.select(); 以上就是js...中焦点事件的介绍，希望对大家有所帮助。...更多js学习指路：js教程推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

6.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭