订阅博客
收藏博客
微博分享
QQ空间分享

Aspcms2.5版本以上幻灯片修改调用代码。

频道:Aspcms 标签:aspcms 时间:2015年05月16日 浏览:2394次 评论:0条

幻灯片aspcms.jpg


效果如图。

往往我们做幻灯片,除非是flash格式的,都会用静态图片路径。每次修改,都得FTP上传覆盖。

aspcms2.5版本支持了幻灯片参数调用:

{aspcms:slidelist id=1}	

<li><a href="[slidelist:link]"><img src="[slidelist:pic]" alt="[slidelist:title]" width=1003 height=305></li>

{/aspcms:slidelist}

上面ID=1表示第一组幻灯片里面所有图片。下面我们以调用5张图片为演示效果。

<!-- Demo start -->
		<!-- css -->
		<link rel="stylesheet" href="/css/slide.css">
		<style>
		.ck-slide { width:1003px; height: 305px; margin: 0 auto;}
		.ck-slide ul.ck-slide-wrapper { height: 305px;}
		</style>
		
		<!-- html -->
		<div class="ck-slide">
			<ul class="ck-slide-wrapper">
	
<style>

.imgg2 {display:none}

.imgg3 {display:none}

.imgg4 {display:none}

.imgg5 {display:none}

</style>





{aspcms:slidelist id=1}	

	

<li class=imgg[slidelist:i]><a href="[slidelist:link]"><img src="[slidelist:pic]" alt="[slidelist:title]" width=1003 height=305></li>

{/aspcms:slidelist}	


			</ul>
			<a href="javascript:;" class="ctrl-slide ck-prev">上一张</a> <a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
			<div class="ck-slidebox">
				<div class="slideWrap">
					<ul class="dot-wrap">
						<li class="current"><em>1</em></li>
						<li><em>2</em></li>
						<li><em>3</em></li>
						<li><em>4</em></li>
<li><em>5</em></li> 
					</ul>
				</div>
			</div>
		</div>
		
		<!-- js -->
		
		<script src="/js/slide.js"></script>
		<script>
			$('.ck-slide').ckSlide({
				autoPlay: true
			});
		</script>
		<!-- Demo end -->


CSS跟JS下载:


JSCSS.rar


◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。