使用JavaScript制作轮播
2024-04-25 17:01:35
第一步
使用两个div标签包裹一个ul标签，ul标签中包含li标签，每个li标签个包含一个img标签，并给每个img标签赋予一个图片，这就是轮播最基本的样式了。轮播的样式较为简单，但也不能疏忽大意。每个img标签赋予的图片都有讲究的。第一个img标签要赋予最后一张img标签要赋予的图片，最后一个img标签要赋予第一张img标签要赋予的图片。如下图所示
最好每一个li标签都给一个注释。假设一个li标签要设置的值为500个像素，则以每张图片500个像素叠加。以上图为例，第一个img为0像素，第二个img为500像素，最后一个img为3000像素，则文中的li标签有7个。
接着再用一个div包含一个ul标签，在ul标签中赋予五个li标签，这些li标签是为了做成一个图片移动时跟着移动的小点。
有了图片移动的小点，同时也有了图片，让我们想想是不是还少了什么呢？少了一个控制图片移动的开关呀！为了简便快捷，我们能直接使用两个a标签作为图片移动时的开关吧
在两个a标签的文本域中赋予一个<和>，这两个表示的是大于号和小于号
上图中左右两个符号就是<和>哦，各位小伙伴不妨自己去试试吧！以上就是这次轮播的基本布局了
布局完成后，我们进行第二步。
我们分别给两个最大的div标签一个类，并修改两个div的样式。大盒子我们给它500个像素的宽和300个像素的高并给大盒子一个绝对定位和一个超出隐藏，小盒子给它3500个像素的宽和300个像素的高并给它一个相对定位。（可能有些小伙伴会问，为何大盒子给500而小盒子给3500呢？因为大盒子就像我们家里的窗，窗的宽高是固定的，而小盒子就像窗外的世界。当窗固定后，小盒子围着大盒子转。我们就能看到不同的景色了。注：如果每张图片的长宽不一，那么我们需要给图片设置一个固定的宽高。）
如上图所示。画红线的地方不动，而其他图片一直移动这就是我们的轮播了。
最外面的两个盒子设置完样式后就要设置两个按钮了。两个按钮要设置一个相对定位，相对于大盒子定位。盒子元素设置隐藏，也可以设置为块级元素。
按钮的样式设置完就要设置几个随着图片移动而移动的小圆点的样式了。
.circleBtn{position: absolute;width: 125px;height: 20px;right: 10px;bottom: 20px;
}
//包裹ul、li标签的div的类
.circleBtn ul li.on{background:hsla(359,70%,62%,1.00);
}
//li标签的类小圆点的样式更简单，只需要在最外面的小圆点的div给一个类并且给这个类设置一个颜色，然后给第一个li标签一个类，并给这个类设置上不同于div的颜色就可以。（如上图所示）
设置完CSS样式后就是JS样式了
JS样式比较复杂一些。首先给一个页面加载事件，并且获取HTML中的clss名称并赋值给JS中的元素。获取按钮ａ标签的类并赋值，给按钮ａ标签一个单机事件。当按下ａ标签时，使小盒子移动500个像素，两个ａ标签都分别赋予两个按钮一个向左一个向右，向左的按钮图片的移动值为正数，向右的图片移动值为负数。
window.onload = function(){//=================向右按钮点击事件====================//获取元素，局部变量var oNextBtn = document.getElementById("next");var oImgBox = document.getElementById("imgBox");//绑定点击事件oNextBtn.onclick = function(){if(transfor==true){return;}if(index==5){index=1;}else{index++;}animation2(-500);setCircle();//alert(parseInt(oImgBox.style.left));}; //====================向左按钮点击事件========================//获取元素var oForwardBtn = document.getElementById("forward");//绑定点击事件oForwardBtn.onclick = function(){if(transfor==true){return;}if(index==1){index=5 }else{index--;}//animation1(500);animation2(500)setCircle();};当两个按钮绑定了点击事件后，需要给右下角的小圆点也绑定点击事件，同时，小圆点也要随着图片的移动而移动。这时就要用到数组的遍历了，获取到远点的类并赋值。使用for循环进行数组的遍历，遍历后给小圆点也绑定点击事件。当某个圆点被点击时将移动图片500乘以点击的按钮的数字。每个li标签都赋一个数字，点击到那个li标签时返回那个值，并将500乘以返回的值，就是图片移动的位置。
<div class="circleBtn" id="circleBtn"><ul><li ind="1" class="on"></li><li ind="2"></li><li ind="3"></li><li ind="4"></li><li ind="5"></li></ul></div>轮播最重要的并不是点击切换而是自动切换。
如何使图片自动切换呢？我们要用到以前学到的定时器，同时为了使轮播的样式看起来更为高端，我们还要添加一个鼠标移入和鼠标移出事件，当鼠标移入时，停止自动播放，当鼠标移出时自动播放停止。
autoPlay();function autoPlay(){//clearInterval()autoTimer = setInterval(function(){oNextBtn.click();},2000);}//获取元素var oShowBox = document.getElementById("showBox");//鼠标移入，自动播放停止oShowBox.onmouseenter = function(){clearInterval(autoTimer);};//鼠标移出，自动播放开始oShowBox.onmouseleave = autoPlay;};设置圆形按钮高亮效果切换，我们还是需要用到数组的遍历，将每个圆形按钮都遍历一遍，然后根据图片位置设置对应按钮的高光。
function setCircle(){//获取元素var aCircleBtn = document.getElementById("circleBtn").getElementsByTagName("li");//遍历所有的圆形按钮for(var i=0;i<aCircleBtn.length;i++){if(aCircleBtn[i].className=="on"){aCircleBtn[i].className="";break;}}//根据图片的位置，设置对应的按钮高亮aCircleBtn[index-1].className="on";
}图片的动画切换效果是怎么来的呢？其实动画的切换效果并不难，我们只需要在每个点击事件添加一个parseInt就可以了，parseInt的作用是将字符串转换为数字。添加了parseInt并不意味着轮播已经完成。当点击超过图片数量的时候，你会发现，后面什么都没有了，但是还是可以点击。
这时候我们因该怎么办呢？我们需要给JS代码中添加一个判定，判定是否已经超出图片的数量。当超出数量的时候执行那一段代码。这就要用到我们的if else语句了。
if(parseInt(box.style.left)<-5500){box.style.left=-1000+"px";}}; 当小盒子的移动超出固定的宽度时，则跳转到第二张图片（注：第二张图片就是我们看到的第一张图片，这里可能有些混乱，各位小伙伴多思考就能读透了。），这时也就体现出我们为什么在第一张图片前面放最后一张的作用了。我们这样做给了一个类似于过渡的效果。当盒子移动超过最后一张图片时，跳转到第二张。当盒子移动超过第一张图片时，跳转到倒数第二张。
完结啦
使用JavaScript制作轮播相关推荐
- 教你用JavaScript制作轮播图
案例介绍 欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图.图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时 ...
- HTML+CSS+JavaScript实现轮播图效果
前言 先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果 百度网盘:百度网盘 请输入提取码 提取码:slbt 没有添加动画效果,添加了自动切换 ...
- 微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
- html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
- 简易javascript图片轮播代码
javascript图片轮播代码 因为自己是新手自学不久,所以代码有很多不规范的地方,请原谅. html部分代码: <div id="head"> <button ...
- html 轮播图自适应,JavaScript 自适应轮播图
JavaScript 自适应轮播图 代码 话不多说,先上代码,方便复制粘贴.演示 轮播图 *{ margin: 0; padding: 0; } ul{ list-style: none; } img ...
- html图片轮播replace,JavaScript图片轮播代码分享
为大家分享的JavaScript图片轮播代码如下 无标题文档 .img-div img{display:none;} 1 2 3 4 5 var zBase= { $id:function(id){r ...
- Axure使用动态面板制作轮播图
对于动态面板的使用我想每一个学习axure的小伙伴都会接触到,聪明的你可能会想,能不能利用动态面板制作出轮播图的效果能?不用怀疑 ,利用动态面板也是能做出好看的轮播图的效果的.那么,下边我就来分享一下 ...
- php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 此效果的层次结构比较清楚: 1. c ...
最新文章
- N天学习一个linux命令之lsof
- 启明云端分享| ESP32-S2直驱USB摄像头
- 美国计算机工程专业,美国计算机工程专业哪些学校比较好
- C/C++编程笔记：C/C++ 的编译和链接
- matplotlib绘制三维折线图
- 腾讯 2017 年投资项目榜单 TOP 10，与阿里死磕到底？
- java delete方法返回值_boolean delete()
- 使用libjpeg-turboYUV转JPG
- python中ttk_ttk/Python中的按钮图像问题
- 猿创征文｜一个.Net过气开发工程师的成长之路
- 深入浅出Yolo系列之Yolov5核心基础知识完整讲解
- “将就的人生，其实沉没成本非常高”
- 从零开始之uboot、移植uboot2017.01（四、uboot的重定位）
- Shell语法详解专栏目录
- 独享版虚拟主机、共享版虚拟主机和云服务器ECS的区别?
- 权益证明问题 —— Proof of Stake FAQ
- JVM 对 Java 的原生锁做了哪些优化？
- 易基因：精原干细胞移植后出生小鼠子代中的精子DNA甲基化变化机制｜新研究
- BOE（京东方）柔性屏显示技术发展势头强劲，赋能应用场景创新
- 晨曦记账本简单记录日常收支