masterSlider插件支持动态加载数据

时间：2022-03-28 16:27:28

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

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

<link rel='stylesheet' href='css/ms-showcase2.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/masterslider.main.css' type='text/css' media='all' />

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type='text/javascript' src='js/masterslider.js'></script>
<script type='text/javascript' src='js/jquery.easing.min.js'></script>

2、html如下： 

<body style="background-color:#333;">

<div style="max-width:800px;margin:50px auto;">

	<div class="ms-showcase2-template ms-dir-v"> 
	  <!-- masterslider -->
		<div class="master-slider ms-skin-default" id="masterslider">
			
		</div>
	  <!-- end of masterslider --> 
	</div>
</div>

</body>


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'
				});
			}
		}

});



标签：

相关文章