html 轮播平移,网站轮播图的实现-平移版

朴灿烈づ我的快乐病毒、 2022-10-08 00:49 189阅读 0赞

/\*关于轮播图，相信大家都不陌生，各大网站上都有它的身影。

\*那么我们如何实现这样一个东西呢？

\*希望这篇博文能帮到你

\*/

![95dffc9a11b40cf234eb959f0813ae50.png][]

/\*上图就是我们今天需要实现的效果

先来确认一下我们的需求：

需求1：鼠标移入轮播图，显示上一页，下一页的箭头，鼠标移出消失

需求2：点击上一页，下一页实现图片切换，导航栏的数字效果跟着变化

需求3：点击导航页码，也可以实现图片切换

需求4：让他实现自动轮播，鼠标移入轮播图取消自动轮播

\*/

/\*首先先分析一下我们的页面构成，我们用一个div把可视区域、页码导航部分、上一页下一页包裹起来

可视区域包裹着一个ul标签，里面每一个li标签装有我们需要轮播的图片

设定ul的宽度等于li标签数量乘以图片的真实宽度(offsetWidth)，让我们的图片呈一列显示，

无论用浮动还是定位的方式都可以，本例子用定位的方式，为什么叻？因为我们div还装有别的一些东西，

也需要用到定位，这样比较方便一点...代码后面呈现，我们现在开始从需求1开始分析

\*/

需求1

这个需求实现比较简单，我们只需要给装有这些元素的大盒子加上一个onmouseover事件和onmouseout事件

让上一页下一页部分显示或者隐藏即可 用到display属性。

需求2

给我们的上一页下一页添加点击事件，onclick

页面默认显示第一张，所以我们可以设置一个变量index来记录我们当前轮播的是哪张图片。

每点击一次下一页index++，再调用我封装好的animation方法实现平移效果切换。(每点击一次，ul向左移动...实现图片切换)

紧接着，如果页码下标与index一致，说明是当前页面，需要改变样式

ok，这样一来，我们基本需求就实现了，那么现在问题又来了，当index达到第5张的时候，此时index=4，

我再点一次会发生什么情况？会发现ul移到了没有图片的地方，页码导航也随之没有了样式

这种情况，我们如何解决呢？为了更好的实现我们的效果，其实我们可以加多一行li代码存储第1张的图片，

当我们点击的时候，index=5，虽然我们程序员知道这是第六张，但在用户眼里，这就是第一张图片，

我们做一个特殊处理，将第一页的页码的样式修改。

当我们在第六张点击的时候，此时我们可以修改ul的位置，再将index设置为0，让它继续进行下一页的操作。

这样我们就可以神不知鬼不觉的实现我们的需求啦。

上一页也是同样的原理。

需求3

我们给每一个页码导航一个属性，让它代表它是对应的哪一张图片，

当我们点击页码的时候，将这个属性取出来，赋值给我们的全局变量index，

这样一来，我们就可以轻松的实现我们动画平移的效果，

再使用排他思想，除了点击的这个以外，样式清空，只给我们这个点击的赋予样式。

需求4

这个就比较简单了，设置一个定时器，每隔一秒钟触发一次下一页的函数体即可，

给大盒子的鼠标移入事件加入清除计时器的效果，移出的时候重新开启计时器效果，

PS：记得保存计时器id，用于清除

接下来看下我们完整的代码吧，希望这篇博文对你有帮助。

padding:0;

margin:0;

list-style:none;

border:0;

.all \{

width:500px;

height:200px;

padding:7px;

border:1px solid \#ccc;

margin:100px auto;

position:relative;

.screen \{

width:500px;

height:200px;

overflow:hidden;

position:relative;

.screen li \{

width:500px;

height:200px;

overflow:hidden;

float:left;

.screen ul \{

position:absolute;

left:0;

top:0px;

width:3000px;

.all ol \{

position:absolute;

right:10px;

bottom:10px;

line-height:20px;

text-align:center;

.all ol li \{

float:left;

width:20px;

height:20px;

background:\#fff;

border:1px solid \#ccc;

margin-left:10px;

cursor:pointer;

.all ol li.current \{

background:yellow;

\#arr \{

display:none;

\#arr span \{

width:40px;

height:40px;

position:absolute;

left:5px;

top:50%;

margin-top:-20px;

background:\#000;

cursor:pointer;

line-height:40px;

text-align:center;

font-weight:bold;

font-family:'黑体';

font-size:30px;

color:\#fff;

opacity:0.3;

border:1px solid \#fff;

\#arr \#right \{

right:5px;

left:auto;

*  ![01.jpg][]
 *  ![02.jpg][01.jpg]
 *  ![03.jpg][01.jpg]
 *  ![04.jpg][01.jpg]
 *  ![05.jpg][01.jpg]
 *  ![01.jpg][]

1.  1
2.  2
3.  3
4.  4
5.  5

< >

需求分析：(1)每隔2s，自动实现下一页点击功能

(2)当鼠标移入box时，清除定时器，切换手动操作

(3)当鼠标移出box时，开启定时器，切换自动轮播

\* 细节：下一页逻辑代码会执行多次，只需要放入函数中(解决代码复用的问题)

\*/

//1.获取元素

var box = id('box');//最外面div，有边框

var screen = document.getElementsByClassName('screen')\[0\];//获取图片可视div,screen

var ul = screen.children\[0\];//图片列表ul标签

var ol = screen.children\[1\];//页码标签

var liList = ul.children;//图片li标签数组

var olList = ol.children;//页码li标签数组

var arr = id('arr');//上一页下一页所在的div

var left = id('left');//上一页按钮

var right = id('right');//下一页按钮

//声明一个全局变量，记录当前应该显示图片的下标

var index = 0;

var timeID = null;//记录自动轮播定时器id

timeID = setInterval(function ( ) \{

nextPage();

\},2000);

//2.鼠标移入移出，显示/隐藏上一页下一页按钮

box.onmouseover = function ( ) \{

arr.style.display = 'block';

//清除自动轮播，切换手动操作

clearInterval(timeID);

box.onmouseout = function ( ) \{

arr.style.display = 'none';

timeID = setInterval(function ( ) \{

nextPage();

\},2000);

//上一页

left.onclick = function ( ) \{

//(1)边界检测

if(index == 0)\{//如果是第一张 index = 0

//修改index为最大下标

index = liList.length-1;

//瞬间修改ul的位置为最后一张

ul.style.left = -index\*screen.offsetWidth + 'px';

//(2)图片下标-1

index--;

//(3)动画滚动图片 移动距离： index\* screen盒子的宽度

animationMove(ul,-index\*screen.offsetWidth);

//(4)使用排他思想改变页码样式

for(var i = 0;i

if(i == index)\{//如果页码下标与index一致，说明是当前页面，需要改变样式

olList\[i\].className = 'current';

\}else\{

olList\[i\].className = '';

//(5)如果是数组的最后一张，页码应该显示第一张

if(index == liList.length-1)\{

olList\[0\].className = 'current';

console.log ( index );

//下一页

right.onclick = function ( ) \{

nextPage();

//将下一页的逻辑代码存入函数中

function nextPage ( ) \{

//(1)边界检测

if(index == liList.length-1)\{//如果index图片下标是图片数组的最大下标则不移动

ul.style.left = '0px';//瞬间改变ul的位置为0

index = 0;//下标复位

//(2)图片下标+1

index++;

//(3)动画滚动图片 移动距离： index\* screen盒子的宽度

animationMove(ul,-index\*screen.offsetWidth);

//(4)使用排他思想改变页码样式

for(var i = 0;i

if(i == index)\{//如果页码下标与index一致，说明是当前页面，需要改变样式

olList\[i\].className = 'current';

\}else\{

olList\[i\].className = '';

//(5)如果是数组的最后一张，页码应该显示第一张

if(index == liList.length-1)\{

olList\[0\].className = 'current';

console.log ( index );

//4.给页码添加点击事件

for(var i = 0;i

//4.1 给每一个页码添加一个自定义属性记录下标

olList\[i\].setAttribute('yemaIndex',i);

olList\[i\].onclick = function ( ) \{

//4.2 获取当前页码点击的下标

var yemaIndex = this.getAttribute('yemaIndex');

//4.3 修改index位置为页码下标

index = yemaIndex;

//4.4 开始滚动

animationMove(ul,-index\*screen.offsetWidth);

//4.5 使用排他思想改变页码样式

for(var j = 0;j

if(olList\[j\] == this)\{

this.className = 'current';

\}else\{

olList\[j\].className = '';

/\*

\*\* Create by zengjiahao on 2018/04/26

\* 动画封装函数

\*/

/\*\*1.平移动画

\* @param obj 要移动的元素

\* @param target 要移动的目标距离

\*/

function animationMove ( obj,target ) \{

//每一次移动之前，先结束上一次的定时器

clearInterval(obj.timeID);

/\*1.全局变量只能存储一个定时器，无法实现多个元素同时移动

2.每一个元素在移动的时候，将定时器作为自己的属性

\* 类似于运动员在跑步的时候，每一个运动员的身上都有一个标签记录定时器，

谁到达终点，回收谁的定时器

\*/

obj.timeID = setInterval(function ( ) \{

//1.获取元素当前位置

var currentLeft = obj.offsetLeft;

//2.计算本次移动的距离

/\* 从左往右移动： 目标位置 > 当前位置 当前位置+=10

从右往左移动： 目标位置 < 当前位置 当前位置-=10

ifLeft: true:从左往右 false：从右往左

\*/

var isLeft = target>currentLeft?true:false;

if(isLeft)\{

currentLeft += 15;

\}else\{

currentLeft -= 15;

//3.边界检测

/\*从左往右true: currentLeft < target

从右往左false: currentLeft > target

边界检测思路：

\* 如果isLeft为true，current

\* 如果isLeft为false，currentLeft > target这个条件成立，需要移动，否则到达目的地

\*/

//这个三元表达式： 如果isLeft是true则返回currentLefttarget

if(isLeft==true?currentLefttarget)\{

obj.style.left = currentLeft + 'px';

\}else\{

clearInterval(obj.timeID);//清除定时器

obj.style.left = target + 'px';

\},10);

[95dffc9a11b40cf234eb959f0813ae50.png]: /images/20221005/ea313de9373c4cd084c9cea77f3e99e6.png
[01.jpg]:

html 轮播平移,网站轮播图的实现-平移版

发表评论取消回复

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

相关阅读

相关 html轮播图

相关 html vue轮播图,webpack+Vue实现轮播图

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

相关 html 轮播平移,网站轮播图的实现-平移版

相关 html 轮播平移,jqeury之平移轮播

相关 html按钮轮播图,四种方式实现轮播图

相关 html script轮播图,javascript简单轮播图

相关 html图片翻转轮播,JavaScript实现旋转轮播图

相关自动轮播图html css js代码,js轮播(自动轮播图html代码)

相关网站轮播图的实现-平移版