masterSlider插件支持动态加载数据

￡神魔★判官ぃ 2022-06-01 09:00 198阅读 0赞

让masterSlider插件支持动态加载数据的方法：先获取到数据，然后在对slider使用setup()函数初始化。

1、先引入master-slider所需的css和js文件，可以从其官网下载源码

2、html如下：

3、js如下：

$(function(){
    	
    		var slider = new MasterSlider();      //新建slider对象，初始化一些属性
    		slider.control('arrows');	
    		slider.control('scrollbar' , {dir:'h'});	
    		slider.control('thumblist' , {autohide:false ,dir:'v',arrows:false});
    
    	
    		var bigstr = ['images/big/1.jpg','images/big/2.jpg','images/big/3.jpg','images/big/4.jpg',
    					'images/big/5.jpg','images/big/6.jpg','images/big/7.jpg'
    	            ];
    		var smallstr = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'
    							,'images/5.jpg','images/6.jpg','images/7.jpg'
    		               ];
    		for(var i = 0;i<7;i++){                 //将数据先动态加载
    			var strlist = '<div class="ms-slide">'+
    				          '<img src="'+bigstr[i]+'" alt="lorem ipsum dolor sit"/>'+ 
    						  '<img class="ms-thumb" src="'+smallstr[i]+'" alt="thumb" />'+ 
    						  '</div>';
    			$('#masterslider').append(strlist);
    
    			// 加载到最后一张图片的时候，用setup()初始化slider
    			if(i==6){
    				slider.setup('masterslider' , {
    					width:610,
    					height:630,
    					space:5,
    					view:'basic'
    				});
    			}
    		}
    
    });