swiper支持动态加载数据

淡淡的烟草味﹌ 2022-06-01 08:21 944阅读 0赞

用swiper插件动态加载数据：动态获取完数据之后，在初始化swiper.

1、在<head>标签里面加入swiper的css和js文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>

2、html如下：

<div class="swiper-container">  
            <div class="swiper-wrapper" id="swiperWrapper">  
              
                
            </div>    
            <div class="swiper-button-prev swiper-button-white"></div>  
            <div class="swiper-button-next swiper-button-white"></div>  
        </div>

3、js如下：

function handlePascreenImg(datas){
    		var len = datas.length,
    			DOMObj = null,        //img
    			obj = null,           //保存当前对象
    			img_path = '',        //图片名
    			price = '',           //霸屏每秒的价钱
    			paScreenType = '',    //霸屏的type
    			name = '',            //霸屏图片的名字
    			src = '';             //图片路径
    
    		// 清除上次的数据
    		$('#swiperWrapper').empty();
    		for( var i=0;i<len;i++ ){
    			obj = datas[i],
    			img_path = obj.img_path,
    			price = obj.price,
    			paScreenType = obj.type,
    			name = obj.name,
    			src = globalConfig.pre_api_url + '/wxwall_api/good/img/' + img_path;
    
    			var imgList =  '<div class="swiper-slide">' +
    						   '<img id="img'+i+'"  src="'+src+'"    name="'+name+'"  paScreenType="'+paScreenType+'"  price="'+price+'" >' +
    						   '</div>';
    
    			$('#swiperWrapper').append(imgList);
    			if( i == len-1 ){
    				$('#paScreenTxt').text($('#img0').attr('name'));
    
    				// 在获取数据之后，在对swiper进行初始化,解决动态加载的问题
    		    	       mySwiper = new Swiper(".swiper-container",{  
    	            	                direction:"horizontal",/*横向滑动*/  
    	            	                // loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/    
    	            	               prevButton:".swiper-button-prev",/*前进按钮*/  
    	            	               nextButton:".swiper-button-next",/*后退按钮*/
    	            	               onSlideChangeStart:function(swiper){
    	            		              // 监听swiper滑动事件,更换图片上方文字
    	            		             var index = swiper.activeIndex;
    	    		                     $('#paScreenTxt').text( $('#img'+index).attr('name') );
    	            	               }  
            		      });
    			}
    		}
    
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，944人围观）

还没有评论，来说两句吧...

相关阅读

相关处理页面动态加载数据

一 selenium selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本

╰+哭是因爲堅強的太久メ/ 2023年08月17日 16:22/ 0 赞/ 2 阅读

相关 freemark动态加载列表数据

1.ftl页面中 <table class="table table-striped table-hover table-bordered" name="r

小灰灰/ 2022年09月30日 03:41/ 0 赞/ 201 阅读

相关延迟加载和动态加载

延迟加载是你在使用的使用加载，而动态加载是在程序运行时才知道类的名字，然后加载类。延迟加载可以应用在动态和非动态的加载上。动态加载的例子 String class

男娘i/ 2022年08月09日 18:50/ 0 赞/ 419 阅读

相关获取动态加载ajax的数据

get\_info import re import urllib2 import json import pandas as pd

﹏ヽ暗。殇╰゛Y/ 2022年06月07日 02:53/ 0 赞/ 206 阅读

相关 masterslider支持动态加载数据，懒加载图片

使用masterslider动态加载图片，并且懒加载图片，使网页运行更快思路：先动态获取到图片的url，将url赋给<img>的一个自定义属性address-src，当获取

╰+攻爆jí腚メ/ 2022年06月01日 09:05/ 0 赞/ 277 阅读

相关 masterSlider插件支持动态加载数据

让masterSlider插件支持动态加载数据的方法：先获取到数据，然后在对slider使用setup()函数初始化。 1、先引入master-slider所需的css和js

￡神魔★判官ぃ/ 2022年06月01日 09:00/ 0 赞/ 186 阅读

相关 swiper支持动态加载数据

用swiper插件动态加载数据：动态获取完数据之后，在初始化swiper. 1、在<head>标签里面加入swiper的css和js文件 <link re

淡淡的烟草味﹌/ 2022年06月01日 08:21/ 0 赞/ 945 阅读

相关 echerts动态加载数据

效果图： ![这里写图片描述][70] 前端页面以及代码： <%-- Created by IntelliJ IDEA. User: XX Date: 2018

矫情吗；*/ 2022年05月22日 09:07/ 0 赞/ 208 阅读

相关动态加载数据autoComplete

注意需要jquery.autocomplete.js和jquery.js连个文件该文件可以在我的另一篇[《动态加载数据autoComplete(mysql数据库)》][aut

痛定思痛。/ 2022年03月31日 10:07/ 0 赞/ 246 阅读

相关 jqgrid——treegrid动态异步加载数据

jqgrid的treegrid插件，有两种数据结构：第一种：可以实现动态加载数据 1. \{ 2. "total":11, 3. "page

悠悠/ 2021年06月24日 13:59/ 0 赞/ 518 阅读