摘要:实现一个非无限循环不自动切换的轮播图只需要几张图片和两个按钮简化部分两个按钮,几张图片假如有四张图右侧按钮左侧按钮部分动态添加删除的属性部分已是最后一张图这是第一张图
实现一个非无限循环不自动切换的轮播图
只需要几张图片和两个按钮(简化)
两个按钮,几张图片(假如有四张图)
右侧按钮
动态添加删除li的class属性(native)
span{ cursor: pointer; } #s1,#s2{ position: absolute; top: 130px; } #s1{ right: 0;} #s2{ left:0; } ul{ width: 460px; height: 280px; margin: auto; overflow: hidden; } li{ float: left; display: none; background-color: orange; } .active{ background-color: #ffffdffffd; display: block; }JS部分
window.onload=function(){ var index = 0, imgs = document.getElementsByTagName("li"); s1.onclick = function(e){ index++; if(index >= imgs.length){ imgs[imgs.length-1].setAttribute("class", "active"); alert("已是最后一张图") return index = imgs.length-1;; }else{ imgs[index-1].removeAttribute("class"); imgs[index].setAttribute("class", "active"); return index; } } s2.onclick=function(){ if(index>0){ imgs[index].removeAttribute("class"); imgs[index-1].setAttribute("class", "active"); index--; return index-1; }else{ imgs[0].setAttribute("class", "active"); alert("这是第一张图") return index = 0; } } }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/96632.html
摘要:小练习轮播图组件任务描述在和上一任务同一目录下面创建一个文件,在目录中创建,并在其中编码,实现一个轮播图的功能。实现思路考察对节点,定时器,事件的处理。 小练习3:轮播图组件 任务描述在和上一任务同一目录下面创建一个task0002_3.html文件,在js目录中创建task0002_3.js,并在其中编码,实现一个轮播图的功能。 图片数量及URL均在HTML中写好 可以配置轮播的顺...
摘要:绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器,移出后自动开始下一张的播放。 通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装,所以在前端暂时只支持标签的引入方式...
摘要:站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历,依然是与轮播图有关。当然,这次思特奇面试之旅,最后也是以失败告终,这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两...
阅读 2998·2021-11-24 10:32
阅读 665·2021-11-24 10:19
阅读 4920·2021-08-11 11:17
阅读 1434·2019-08-26 13:31
阅读 1235·2019-08-23 15:15
阅读 2263·2019-08-23 14:46
阅读 2243·2019-08-23 14:07
阅读 1039·2019-08-23 14:03