一篇文章讲明白JS左右轮播图的制作思路

简介: 一篇文章讲明白JS左右轮播图的制作思路

正好学到这,根据前面讲的点自己悟的方法。可能不是很简便,但就当给自己做个笔记吧。

大致构图如下。中间轮播图使用ul>li>a>img来做。因为li要给浮动确保他们在同一行上,所以给ul设定了宽度(这就感觉css不太灵活了……不过话说回来正是它不灵活才能让js有灵活性吧……)

同时给【ul】做绝对定位确保他能左右滑动营造动画效果,外面的大盒子隐藏溢出!

[/span>div class="focus"

[/span>a href="#" class="arrow_1"

[/span>a href="#" class="arrow_2"

[/span>ul class="slider-item"

[/span>li

[/span>a href="#1"

[/span>img src="images/dogy.jpg" alt=""

[/span>li

[/span>a href="#1"

[/span>img src="images/dogy1.jpg" alt=""

[/span>li

[/span>a //代码效果参考:http://www.zidongmutanji.com/zsjx/233079.html

href="#1"

[/span>img src="images/dogy2.jpg" alt=""

[/span>ul class="slider-node"

[/span>li

[/span>li

[/span>li

以下是js(我这写在html里了)

//获取左右两个箭头

let arr1 = document.querySelector('.arrow_1');

let arr2 = document.querySelector('.arrow_2');

//获取轮播图的ul以及下面指示点的ul

let ul = document.querySelector('.focus .slider-item');

let node = document.querySelector('.focus .slider-node');

// console.log(ul.children.length);

// console.log(ul.offsetWidth)

//更改指示点颜色

function list(obj, n) {

for (let i = 0; i < obj.children.length; i++) {

obj.children【i】.style.backgroundColor = 'transparent';

obj.children【i】.style.borderColor = '#666';

}

obj.children【n】.style.backgroundColor = 'red';

obj.children【n】.style.borderColor = 'red';

}

//中间轮播图运动函数,fn是回调,达成某种条件时调用该函数。说实话可以把上面的函数整合进来,但懒得改了

function move(obj, target, fn) {

clearInterval(obj.timer);

//在函数内设置定时器!!!然后距离到了就删除定时器

obj.timer = setInterval(function () {

let step = (target - obj.offsetLeft) / 10;

step = step > 0 ? Math.ceil(step) : Math.floor(step);

obj.style.left = obj.offsetLeft + step + 'px';

if (obj.offsetLeft === target) {

clearInterval(obj.timer);

if (fn) {

fn();

console.log(obj.offsetLeft);

}

}

}, 15)

};

// console.log(ul.children【0】.offsetWidth);

//设定当前的轮播图图片在轮播图中的位置。以数组形式,所以首位为0。

//1也可以,但有的地方需要-1,所以就这样吧

let a1 = 0;

let length = ul.children.length;

//因为正常轮播就是从左往右,当然换个方向也行。因此把函数独立出来起个名字,设置定时器自动触发

setInterval(slider, 5000);

function slider() {

//这个是轮播图到达最右侧时,重新将轮播图拉回开头,并重新设置位置

if (a1 + 1 === length) {

move(ul, 0);

a1 = 0;

} else {

move(ul, -ul.children【0】.offsetWidth (a1 + 1))

a1++;

}

list(node, a1);

}

arr1.addEventListener('click', slider);

arr2.addEventListener('click', function () {

if (a1 === 0) {

move(ul, ul.children【0】.offsetWidth (a1 - length + 1));

a1 = length - 1;

} else {

move(ul, -ul.children【0】.offsetWidth (a1 - 1))

a1--;

}

list(node, a1);

});

//给下面的指示点添加响应事件。因为是整个ul内的li,所以直接使用冒泡原理来添加了

node.addEventListener('mouseover', function (e) {

//判断ul内部点击到了li才会接着往下执行,不进行判断的话当鼠标移动到非li区域时

//会导致下面的判断位置函数失效,重回初始位置

if (e.target !== node) {

for (let i = 0; i < node.children.length; i++) {

node.children【i】.style.flag = 0;

}

//这里是为了辨别响应的li标签处在ul父元素中的哪个位置

//自定义属性即可。一开始想用backgroundColor来做,后来想想不太好,直接设个自定义属性

e.target.style.flag = 1;

let n = 0;

console.log('我是' + n);

for (let i = 0; i < node.children.length; i++) {

if (node.children【i】.style.flag) {

n = i;

break;

}

}

//重新赋予位置,并且将图片移动到当前位置

a1 = n;

move(ul, -ul.children【0】.offsetWidth n)

list(node, n);

console.log('n=' + n);

console.log(a1);

}

}

)

思路如下:

11、2022-04-27更新:为了让左右滑到尽头时,看上去不至于太突兀,因此在正常的轮播图结尾克隆了一个子节点——第一张图!

这样当正常滚动到最后图片时,先播放克隆的节点,然后在继续滚动时将整体轮播图的left值设置为0——这样就相当于从第一张开始滚动了!因为首尾相同,隐藏溢出,因此这次变换看不出来,只会觉得是首尾相连继续滚动!

同理对底下指示点的作用。因为一开始定义的length是原始图片(5张)的长度,而克隆过后为6张,所以重新使用轮播图长度作为判断(可以看到指示点是以自己的长度做判断(5),滚动图同理(6))

//因为正常轮播就是从左往右,当然换个方向也行。因此把函数独立出来起个名字,设置定时器自动触发

//通过克隆第一个元素,使其看上去像是无缝的

let width = ul.children【0】.offsetWidth;

let first = ul.children【0】.cloneNode(true);

ul.appendChild(first);

function slider() {

//这个是轮播图到达最右侧时,重新将轮播图拉回开头,并重新设置位置

if (a1 + 1 === ul.children.length) {

ul.style.left = '0';

a1 = 0;

}

a1++;

circle = a1;

if (circle === node.children.length) {

circle = 0;

}

console.log('我是circle=' + circle + '我是a1=' + a1);

list(node, circle);

move(ul, -width a1)

}

1、在函数内部添加定时器,每次调用时给obj对象的位置做调整,较小时间间隔看上去就会像是动画一样。当到达位置后清除定时器;

2、先对左右两个a标签添加点击响应。确保其能够正常左右滚动。滚动距离可以从轮播图中li的宽度获取——这里可以设一个变量替代,因为用到的地方蛮多的。同时设置位置变量a1(或许n更好?);

3、当图片移动到尽头时——对于从左往右走的图片来说,第【5】个li就是其尽头,此时做判断并将其滑回开始位置。同样调用动画函数,只不过位置重回原点;

4、左边的点击做完,做右边的。右边的时反过来,尽头是第一个。因此当a1==0时,将图片快速跳转至最右侧;

(突然发现逻辑似乎反过来了……我想的是点击左侧按钮然后像是滑动一样将图片滑去左侧并展示【右侧】图片……但感觉显示左侧的才算合乎直觉?哈哈哈)

5、因为之前设置过位置变量,所以就能很方便地对于下方指示点也做出颜色的调整;

6、然后为下方指示点ul添加响应函数。采取的冒泡响应来给所有子元素li添加响应;

7、因为是冒泡,返回的event只有触发该事件的元素本身——譬如li标签,他并没有返回其所在位置——有client之类的位置,但那样判断太麻烦了。所以直接设置一个自定义属性,并群体赋值,再对响应元素赋特异值,使其在第二轮遍历中能够查找出其位置;

8、其实采取两轮for循环依次对li添加响应的话,也能迅速返回其位置。所以时间复杂度应该是差不多的吧。不过那样写起来太麻烦了,索性直接用这个了——搜了一圈没搜到在冒泡监听中返回位置的简易写法,自己想了个;

9、刚刚去看了某东的。他们是采取z-index的方式来渐隐渐入图片,就没有左右拖动的效果了。应该原理差不多,回头学下渐隐相关的css;

10、更完美的话应该在click和mouseover响应事件时定时器并重新设置,否则有时候看上去会比较跳跃——指时间快到时用户点击切换,然后时间到了又跳到下一张……不过我这里懒得改了。

完整代码:

<!DOCTYPE html

[/span>html lang="en"

[/span>head

[/span>meta charset="UTF-8"

[/span>title

[/span>style

{

padding: 0;

margin: 0;

}

.focus {

position: relative;

overflow: hidden;

margin: 200px auto;

Width</span>: 600px;

Height</span>: 400px;

border: 1px solid black;

}

ul, li {

list-style: none;

}

a, a:hover {

display: inline-block;

text-decoration: none;

color: #666666;

}

.focus .arrow_1, .focus .arrow_2 {

display: block;

position: absolute;

Height</span>: 40px;

Width</span>: 20px;

line-Height</span>: 40px;

background-color: #ddd;

z-index: 10;

}

.focus .arrow_1 {

top: 50%;

left: 0;

transform: translateY(-50%);

text-align: left;

border-top-right-radius: 50%;

border-bottom-right-radius: 50%;

}

.focus .arrow_2 {

top: 50%;

相关文章
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
19天前
|
前端开发
js-基础轮播图制作
js-基础轮播图制作
19 7
|
2月前
|
JavaScript 前端开发
js轮播图练习
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的轮播图效果。通过`img`标签展示图片,并通过点击下方的点(`span`标签)切换图片。文章提供了完整的HTML结构、CSS样式和JavaScript代码,以及图片的展示和轮播图的效果图。
js轮播图练习
|
24天前
|
JavaScript 前端开发
js轮播图有左右箭头和小点
js轮播图有左右箭头和小点
30 1
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
3月前
|
JavaScript
js轮播图制作
js轮播图制作
33 1
|
3月前
|
JavaScript
js轮播图功能
js轮播图功能
18 0
|
3月前
|
前端开发 JavaScript
如何使用JavaScript制作轮播图
如何使用JavaScript制作轮播图
21 0
|
3月前
|
JavaScript
js之简单轮播图
js之简单轮播图
36 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
105 4