12行原生JS代码实现最简单的图片轮播

keithxiaoy 发布于2019-08-20 15:59 / 1183人阅读

摘要：如果有错误，请指出，请原谅。俄罗斯左箭头右箭头将所有放入一个数组，将的值设置为俄罗斯加拿大枫叶澳大利亚澳大利亚加拿大枫叶澳大利亚获取的属性值，通过对进行加，将对应的数组元素设置为的属性。定时器被取消后，需要重新设置定时器。利用定时器开始轮播

图片轮播

js新手。如果有错误，请指出，请原谅。
``
//


   

 
   左箭头

 
   右箭头

// 4.21
// 将所有URL放入一个数组，将index的值设置为0
var imgs = ["picture/俄罗斯.jpg","picture/加拿大枫叶.jpg","picture/澳大利亚.jpg","picture/澳大利亚2.jpg","picture/加拿大枫叶.jpg","picture/澳大利亚.jpg"];
var index = 0;
var stopValue = 0；
var startValue = 0;
// 获取img的src属性值，通过对index进行加1，将对应的数组元素设置为img的src属性。
function carousel(){
    var img = document.getElementsByTagName("img")[0]
    if (index < imgs.length-1) {
        index++;
        img.setAttribute("src",imgs[index]);
    } else { // 当index值变成5，进入循环时，将img的src属性设置为第一个url地址，同时index值变为0
        img.setAttribute("src","picture/俄罗斯.jpg")
        index = 0;
    }

}
// 4.22 鼠标进入stop，鼠标离开start功能.
//鼠标移动到箭头所在的元素清楚定时器，鼠标离开则恢复轮播
// 定义两个全局变量stopValue 和startValue 为0；

// onmouseover和onmouseout从进入对应的元素范围到离开对应的元素范围会执行很多次，
// 通过两个全局全局变量，让它不管在对应的元素范围内如何移动都只执行一次，
//  避免setInterval时间出错。
function stop(){
   stopValue+=1;
   if(stopValue < 2){
        clear();
       // 当第一次onmouseover和onmouseout事件完成之后，全局变量的值改变，
       // 通过将两个全局变量的值归零，保证之后的onmouseover和onmouseout能执行。
       startValue = 0
   }

};

 function start(){
    startValue+=1;
    if(startValue < 2){
        setInt()
        // 同上。
        stopValue = 0;
    }
};
    function clear() {
    clearInterval(int)
};
    function setInt(){
    // 定时器被clearInterval取消后，需要重新设置定时器。
    int = setInterval("carousel()",1000)
};
    // 利用定时器开始轮播
    var int= setInterval("carousel()",1000)

GPU云服务器云服务器原生JS实现轮播简单轮播代码最简单的asp代码原生js横向轮播旋转

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

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

回顾自己三次失败的面试经历

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

DC_er 2019-08-21 17:42 评论0 收藏0
回顾自己三次失败的面试经历

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

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

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

jasperyang 2019-08-23 10:57 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

BigTomato 2019-08-29 15:17 评论0 收藏0