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

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

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

主要步骤：

  • 定义数组

  • 使用 jQuery 读取数组

  • 输出数组的每一个值

  • 运行代码并观察输出

主要js代码与说明

纯文本
点击复制
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
Expand
<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>