js原生代码实现轮播图

发布时间:2025-05-22 21:09:41 发布人:远客网络

js原生代码实现轮播图

一、js原生代码实现轮播图

<title>最简单的轮播广告</title>

transition: opacity 0.5s linear

var box=document.getElementById('box');

var uls=document.getElementsByTagName('ul');

var imgs=uls[0].getElementsByTagName('li');

var btn=uls[1].getElementsByTagName('li');

var i=index=0;//中间量，统一声明；

console.log(box,uls,imgs,btn);//获取正确

//图片切换,淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不纠结、简单在css里面

function show(a){//方法定义的是当传入一个下标时，按钮和图片做出对的反应

for(i=0;i<btn.length;i++){

btn[i].className='';//很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。

btn[a].className='current';

for(i=0;i<imgs.length;i++){//把图片的效果设置和按钮相同

for(i=0;i<btn.length;i++){

btn[i].index=i;//不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住

btn[i].onmouseover=function(){

clearInterval(play);//这就是最后那句话追加的功能

play=setInterval(function(){//这个paly是为了保存定时器的，变量必须在全局声明不然其他方法调不到或者你可以调用auto.play也许可以但是没时间试了

index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。

autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了

//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。貌似我可以直接追加到之前定义事件中。

二、简单轮播图的实现及原理讲解(js)

三个div，最外层id为 parent的大div内包含了 uls和 buttons两个div，div uls中包含了两个列表 img_ul（图片列表）, litCir_ul（小圆点列表），div buttons里则包含了“左”，“右”两个按钮。

之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。

默认 li的 class为 quiet,第一张默认为 active。

首先先理解该轮播图如何滚动，这里是通过控制 img_ul的 left值来控制显示某张图片，为了实现“滚动”的效果，我们需要逐渐改变 img_ul的 left值，而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数 Roll()。

试想下面的情况，当图片从最后一张切换到第一张时，这时就不能通过逐渐改变 img_ul的 left值来实现滚动的效果，于是克隆第一张图片至列表尾部，当滚动完最后一张图片时，继续滚动到克隆的第一张，然后将 img_ul的 left值置为0。

需要注意的是小圆点和图片列表的 li数目是不一样的，当滚动到最后一个克隆项时，此时小圆点实际上在第一个位置。

timer= setInterval(autoRun, gap);

给每个小圆点绑定了onmouseover事件，这个方法有个细节，会根据两次小圆点的距离差调整速率为 rate*times，使切换效果更自然（也就是说每次切换说花的时间基本一致，无论是第一张到第二张，还是第一张到最后一张）。

触及区域，清除定时器，显示按钮。

离开区域，添加定时器，隐藏按钮。

自动播放就是间隔一定时间不断调用函数“下一张”的过程，所以这里的按钮 right下一张的实现就是上面的 autoRun函数。

以上就是轮播图各部分的实现原理，如果你有其他的方法，欢迎一起交流！

用requestAnimationFrame()实现一个轮播图

三、微信轮播图如何做的

1、如果你想在微信公众账号中编辑轮播图，也就是那种可以自动或手动切换的多张图片，你有以下几种方法：

2、方法一：使用微信公众平台自带的轮播图功能。这是一个比较简单和方便的方法，你只需要在微信公众平台的后台管理中，选择【素材管理】-【新建图文消息】，然后在编辑区域中，点击【添加轮播图】按钮，就可以上传和编辑多张图片作为轮播图。你可以设置每张图片的标题、链接、摘要等信息，也可以调整图片的顺序和显示时间。编辑完成后，点击【保存】即可。

3、方法二：使用第三方的轮播图编辑器。这是一个比较灵活和多样的方法，你可以在网上找到一些专业的轮播图编辑器，如96编辑器、速排小蚂蚁等，它们可以提供更多的轮播图样式和动效，让你的轮播图更加美观和吸引人。你可以在这些编辑器中选择或上传你想要的图片，并设置相应的参数和效果，然后生成一段代码或链接，复制到微信公众平台的图文编辑器中即可。

4、方法三：使用SVG动画制作轮播图。这是一个比较复杂和高级的方法，你需要有一定的编程基础和美术功底，才能使用SVG动画来制作轮播图。SVG动画是一种基于矢量图形的动画技术，它可以让你自由地控制图片的形状、颜色、位置、旋转等属性，并实现各种复杂的动画效果。你可以使用一些专业的SVG动画工具，如Snap.svg、SVG.js等，来编写和预览SVG动画代码，并将其复制到微信公众平台的图文编辑器中即可。