js_for循环应用之生成轮播

最新推荐文章于 2022-10-27 13:50:43 发布

原创最新推荐文章于 2022-10-27 13:50:43 发布 · 3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何利用JavaScript的for循环来实现轮播图的制作，包括生成与图片数量相等的底部按钮，以及处理按钮的选中状态。通过两种方法详细阐述了如何在用户点击按钮或切换图片时，正确更新按钮的选中状态。

目的：使用 for循环生成轮播图（如图）
步骤：

        获取每个需要的元素
        将图片装入数组中，使用数组的下标获取图片
        申请变量，通过改变变量，获取数组里面的图片

<div id="banner">
    <img src=""/>
    <ul></ul>
    <div id="btn">
        <div><</div>
        <div>></div>
    </div>
</div>

window.onload = function(){
    var Banner = document.getElementById('banner');
    var Img = document.getElementsByTagName('img');
    var Ul = document.getElementsByTagName('ul');
    var Btns = document.getElementById('btn');
    var btns = Btns.getElementsByTagName('div');
    var Lis = document.getElementsByTagName('li');
    var Icos = document.getElementsByClassName('ico');
    var arr = ['img/jiushui.gif','img/mx6.gif','img/car.gif','img/banner.jpg','img/MZ6.jpg'];


    //初始化
    var index = 0;
    Img[0].src = arr[0];
    //生成下方点击按钮  
    for(var i=0; i<arr.length; i++){
        str+='<li></li>';
    }
    Ul[0].innerHTML = str;
    Lis[0].className = 'active';        
    //向前翻页
    btns[0].onclick = function (){
        index--;
        if(index<0){
            index = arr.length-1;
        }
        Img[0].src = arr[index%5];
        fn()
    }

    //向后翻页
    btns[1].onclick = function (){
        index++;
        Img[0].src = arr[index%5];
        fn()
    }

    var old = Lis[0];
    for(var i=0; i<Lis.length; i++){
        Lis[i].index = i;
        Lis[i].onclick = function(){
            index = this.index;
            Img[0].src = arr[this.index];
            fn();
        }
    }

    function fn(){
        old.className = '';
        Lis[index%5].className = 'active';
        old = Lis[index%5];
    }   
}

注意点：

使用for循环生成图片下方按钮，有多少图片生成多少按钮
图片下方按钮选中状态通过添加class，点击新的按钮时，去掉上一个按钮选中状态，给当前选中按钮添加class
方法一：使用for循环清空所有按钮选中状态，给当前添加选中状态
方法二：使用变量储存上一次点击的按钮，默认为第一个，点击时，清空默认选中选中按钮的class，给当前添加选中状态，将当前选中的按钮赋值给变量，使下次点击时现在选中的按钮为上次选中的按钮，按照这个步骤循环。
3.点击左右按钮时切换下面按钮的选中状态，方法：使index = this.index统一使之一样。