图片轮播html实现原理,简单轮播图的实现及原理讲解（js）

叁歲伎倆 2022-10-05 10:57 330阅读 0赞

0.最终效果预览

![366e374e108d][]

鼠标未触及区域时(自动滚动中)

![366e374e108d][]

鼠标触及区域后 (停止滚动，显示按钮)

基本功能

自动无缝滚动

左右按钮控制滚动

点击圆点切换图片

1.整体结构与思路

Html部分

*  ![0.jpg][]
 *  ![1.jpg][0.jpg]
 *  ![2.jpg][0.jpg]
 *  ![3.jpg][0.jpg]
 *  ![4.jpg][0.jpg]

三个div，最外层id为parent的大div内包含了uls和buttons两个div，divuls中包含了两个列表img\_ul(图片列表), litCir\_ul(小圆点列表)，divbuttons里则包含了“左”， “右”两个按钮。

CSS部分

\#parent\{

position: relative;

margin: 50px auto;

padding: 0;

width: 500px;

height: 309px;

\#uls\{

position: relative;

margin: 0;

padding: 0;

width: 500px;

height: 309px;

overflow: hidden;

\#img\_ul\{

position: absolute;

margin: 0;

padding: 0;

left: 0;

top: 0;

width: 3000px; /\*多留出一张图片的宽度！\*/

list-style: none;

\#img\_ul li\{

float: left;

margin: 0;

padding: 0;

width: 500px;

height: 309px;

\#img\_ul li img\{

width: 500px;

height: 309px;

\#litCir\_ul\{

position: absolute;

margin: 0;

padding: 0;

right: 10px;

bottom: 10px;

list-style: none;

\#litCir\_ul li\{

margin: 0;

padding: 0;

float: left;

width: 20px;

height: 20px;

text-align: center;

line-height: 20px;

border-radius: 50%;

margin-left:10px ;

cursor: pointer;

li.active\{

background-color: white;

li.quiet\{

background-color: \#1e90ff;

\#buttons\{

margin: 0;

padding: 0;

display: none;

\#buttons span\{

position: absolute;

width: 40px;

height: 40px;

top: 50%;

margin-top: -20px;

line-height: 40px;

text-align: center;

font-weight: bold;

font-family: Simsun;

font-size: 30px;

border: 1px solid \#fff;

opacity: 0.3;

cursor: pointer;

color: \#fff;

background: black;

\#left\{

left: 5px;

\#right\{

left: 100%;

margin-left: -45px;

需要注意的地方

图片的宽，高度应和img\_ul中的li标签， 以及div\#parent， div\#uls的宽，高度一致。

img\_ul的宽度应为(图片数目+1)\*每张图片的宽度。也就是要多留出一张图片的宽度(下一部分解释)。

div uls部分使用overflow:hidden隐藏img\_ul超出的部分，确保每次该区域只能显示一张完整的图片。

2.功能实现(JS部分)

①将会在下面用到的Html中的对象和一些变量

/\*获取HTML中的对象\*/

var parent = document.getElementById("parent");

var img\_ul = document.getElementById("img\_ul");

var litCir\_ul = document.getElementById("litCir\_ul");

var buttons = document.getElementById("buttons");

var cLis =litCir\_ul.children;

var len = img\_ul.children.length; //图片张数

var width = parent.offsetWidth; //每张图片的宽度

var rate = 15; //一张图片的切换速度， 单位为px

var times = 1; //切换速度的倍率

var gap = 2000; //自动切换间隙， 单位为毫秒

var timer = null; //初始化一个定时器

var picN = 0; //当前显示的图片下标

var cirN = 0; //当前显示图片的小圆点下标

var temp;

②添加小圆点

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

for (var i=0; i

var a\_li = document.createElement("li");

a\_li.className = 'quiet';

litCir\_ul.appendChild(a\_li);

litCir\_ul.children\[0\].className = "active";

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

③无缝滚动是怎么实现的？

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

function Roll(distance)\{ //参数distance：滚动的目标点(必为图片宽度的倍数)

clearInterval(img\_ul.timer); //每次运行该函数必须清除之前的定时器！

var speed = img\_ul.offsetLeft < distance ? rate : (0-rate); //判断图片移动的方向

img\_ul.timer = setInterval(function()\{ //设置定时器，每隔10毫秒，调用一次该匿名函数

img\_ul.style.left = img\_ul.offsetLeft + speed + "px"; //每一次调用滚动到的地方 (速度为 speed px/10 ms)

var leave = distance - img\_ul.offsetLeft; //距目标点剩余的px值

/\*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片\*/

if (Math.abs(leave) <= Math.abs(speed)) \{

clearInterval(img\_ul.timer);

img\_ul.style.left = distance + "px";

\},10);

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

/\*克隆第一个li到列表末\*/

img\_ul.appendChild(img\_ul.children\[0\].cloneNode(true));

④自动滚动

function autoRun()\{

picN++;

cirN++;

if(picN > len)\{ //滚动完克隆项后

img\_ul.style.left = 0; //改变left至真正的第一项处

picN = 1; //从第二张开始显示

Roll(-picN\*width);

if(cirN > len-1)\{ //判断是否到了最后一个圆点

cirN = 0;

for(var i=0; i

cLis\[i\].className = "quiet";

cLis\[cirN\].className = "active";

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

开始自动滚动：

timer = setInterval(autoRun, gap);

⑤触及小圆点时切换至对应图片

for(var i=0; i

cLis\[i\].index = i;

cLis\[i\].onmouseover = function()\{

for(var j=0; j

cLis\[j\].className = "quiet";

this.className = "active";

temp = cirN;

picN = cirN = this.index;

times = Math.abs(this.index - temp); //距离上个小圆点的距离

rate = rate\*times; //根据距离改变切换速率

Roll(-this.index \* width);

rate = 15;

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

⑥触及轮播图区域和离开该区域时

parent.onmouseover = function()\{

clearInterval(timer);

buttons.style.display = 'block';

parent.onmouseout = function()\{

timer = setInterval(autoRun, gap);

buttons.style.display = 'none';

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

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

⑦给两个按钮添加onclick事件

/\*上一张\*/

buttons.children\[0\].onclick = function()\{

picN--;

cirN--;

if(picN < 0)\{ //滚动完第一项后

img\_ul.style.left = -len\*width + "px"; //改变left至克隆的第一项处

picN = cirN = len-1;

Roll(-picN\*width);

//bug处理

if(cirN < 0)\{

cirN = len-1;

for(var i=0; i

cLis\[i\].className = "quiet";

cLis\[cirN\].className = "active";

/\*下一张\*/

buttons.children\[1\].onclick = autoRun;

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

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

2019.3.30更新：

[366e374e108d]: /images/20221005/cf174d71eb4c4108be1fb574896acb9d.png
[0.jpg]:

图片轮播html实现原理,简单轮播图的实现及原理讲解（js）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html + js 简单实现轮播图

相关轮播图实现html,html、css、js实现轮播图

相关 html简单图片轮播居中,html简单图片轮播的实现

相关简单html实现图片轮播,JavaScript实现简易轮播图

相关 html原生js实现图片轮播,原生js实现简单轮播图

相关 html实现自动图片轮播,图片轮播的实现（html__js）

相关 html中简单轮播图实现原理,常见轮播效果及其实现原理

相关 html中简单轮播图实现原理,jQuery实现一个简单的轮播图

相关图片轮播html实现原理,简单轮播图的实现及原理讲解（js）

相关 js实现轮播图（简单滚动轮播)