您现在的位置是:首页 >>CxCmsCxCms

轮播图-PC端

zhang2020-11-19 18:05:37【CxCms】人已围观

简介:
PC端轮播图功能html代码:<article class="container"><section> <figure id="full_feature" c...

PC端轮播图功能

html代码:

<article class="container">
<section>
<figure id="full_feature" class="swipslider">
<ul class="sw-slides">
{cxcms:slidelist id=1}
<li class="sw-slide">
<img src="[slidelist:pic]" alt="幻灯片">
</li>
{/cxcms:slidelist}
</ul>
</figure>
</section>
</article>


JS代码:(放</body>前)

<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js?version={cxcms:cachernd}"><\/script>')</script>
<script type="text/javascript" src="js/swipeslider.min.js?version={cxcms:cachernd}"></script>
<script type="text/javascript">
$(window).load(function() {
$('#full_feature').swipeslider();
$('#content_slider').swipeslider({
transitionDuration: 600,
autoPlayTimeout: 10000,
sliderHeight: '300px'
});
$('#responsiveness').swipeslider();
$('#customizability').swipeslider({
transitionDuration: 1500,
autoPlayTimeout: 4000,
timingFunction: 'cubic-bezier(0.38, 0.96, 0.7, 0.07)',
sliderHeight: '30%'});
});
</script>

css代码:(放头部)

<link href="css/swipeslider.css?version={cxcms:cachernd}" rel="stylesheet">

引用js与css文件见本地




上一篇:自适应轮播图

下一篇:自定义变量

文章评论

    评论加载中...

标签云

站点信息

  • 建站时间:2018-11-17
  • 文章统计:90篇文章
  • 微信公众号:扫描二维码,关注我
在线客服
在线客服
在线咨询:
点击这里给我发消息技术支持
点击这里给我发消息技术支持
点击这里给我发消息技术支持
点击这里给我发消息技术支持
电话咨询:
电话咨询
156-2913-6039