JS -- 记一种用原生JS 实现轮播图的方法（非无限循环不自动切换）

hidogs 发布于2019-08-23 10:44 / 3348人阅读

摘要：实现一个非无限循环不自动切换的轮播图只需要几张图片和两个按钮简化部分两个按钮，几张图片假如有四张图右侧按钮左侧按钮部分动态添加删除的属性部分已是最后一张图这是第一张图

实现一个非无限循环不自动切换的轮播图
只需要几张图片和两个按钮（简化）

HTML部分

两个按钮，几张图片（假如有四张图）

CSS部分

动态添加删除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;
                }
            }
        }

云服务器 GPU云服务器原生JS实现轮播 js轮播图视频 js焦点轮播图轮播图鼠标悬浮js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96632.html

实现简单的轮播图

摘要：小练习轮播图组件任务描述在和上一任务同一目录下面创建一个文件，在目录中创建，并在其中编码，实现一个轮播图的功能。实现思路考察对节点，定时器，事件的处理。小练习3：轮播图组件任务描述在和上一任务同一目录下面创建一个task0002_3.html文件，在js目录中创建task0002_3.js，并在其中编码，实现一个轮播图的功能。图片数量及URL均在HTML中写好可以配置轮播的顺...

EsgynChina 2019-08-22 10:39 评论0 收藏0
手把手教你用原生JavaScript造轮子（2）——轮播图（更新：ES6版本）

摘要：绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器，移出后自动开始下一张的播放。通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装，所以在前端暂时只支持标签的引入方式...

jasperyang 2019-08-23 10:57 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

DC_er 2019-08-21 17:42 评论0 收藏0