jQuery读取数组图片呈现 swiper图片联动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jQuery 读取数组数据并将数据添加到swiper标签里面形成图片联动效果.本实例是使用for循环遍历输出数组元素，for循环是一个常见的遍历数组的方法， 使用jq的for循环语法可以遍历一个数组中的每一个元素。

在这个示例中，我们首先创建了一个包含数据的数组datas。然后，使用for循环遍历数组，并创建一个swpData()方法来读取数据并填充到swiper标签中。

主要步骤：

  • 定义数组

  • 使用 jQuery 读取数组

  • 输出数组的每一个值

  • 运行代码并观察输出

主要js代码与说明

<script type="text/javascript">
    // 初始化   
    $('.imgbottom>.swiper-wrapper').html("")
    $('.imgtop>.swiper-wrapper').html("")
    // 轮播标签添加
    function swpData(url) {
        return '<div class="swiper-slide"><img src="' + url + '" /></div>'
    }
    $(document).ready(function () {
        var arr = []
        for (var i in datas) {
            arr.push(swpData(datas[i].url))
        }
        // 数据添加
        imgtop.appendSlide(arr);
        imgbottom.appendSlide(arr);
        imgtop.slideTo(0, 1000, false); //默认切换到一个
        imgbottom.slideTo(0, 1000, false); //默认切换到一个  
    });
</script>