Aspcms2.5版本以上幻灯片修改调用代码。
效果如图。
往往我们做幻灯片,除非是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下载:
除非注明,否则文章均由 明镜商务 整理发布,欢迎转载。
转载请注明本文地址:http://mingjing.biz/post/28.html