高效、专业、符合SEO优化,首选翠竹林wordpress主题,大气,简洁,清新。点击群2:翠竹林wordpress主题 群2:613574832 QQ:458940846,985300418

使用jQuery图片轮播插件ResponsiveSlides.js给wordpress增加幻灯片功能

空谷 2119次浏览 0个评论

无论是个人博客网站,自媒体或者是企业网站,首页有一个图片轮播功能或者说是幻灯片功能会给网站增加不少生机,另外更重要的是,幻灯片功能可以展示网站的最热点的内容,或者最热门的产品,方便更好的推广,那么如何给wordpress增加幻灯片功能呢?只需要使用jQuery图片轮播插件ResponsiveSlides.js就能够轻松的解决,而且是响应式的,在手机,电脑,平板端都可以使用。
幻灯片wordpress
首先在wordpress的index.php中引入以下两个JS文件:

<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/responsiveslides.min.js"></script>

这两个文件一般都是放在主题文件的JS文件夹中,下载地址:
http://pan.baidu.com/s/1skO97Nf
下载下来之后解压放到wordpress主题JS文件夹中。

其次在需要放幻灯片的地方加入下面的代码即可:

<div class="slick_bor">
<ul class="slick">
<li id="2" class=""><a href="链接地址"><img class="img_855x300" src="图片地址" alt=""><span></span></a></li>
<li id="2" class=""><a href="链接地址"><img class="img_855x300" src="图片地址" alt=""><span></span></a></li>
<li id="2" class=""><a href="链接地址"><img class="img_855x300" src="图片地址" alt=""><span></span></a></li>
<li id="2" class=""><a href="链接地址"><img class="img_855x300" src="图片地址" alt=""><span></span></a></li>
<li id="2" class=""><a href="链接地址"><img class="img_855x300" src="图片地址" alt=""><span></span></a></li>
</ul>
<script>
$(function() {
	var mx = document.body.clientWidth;
	$(".slick").responsiveSlides({
	   auto: true,//设置是否自动播放, true or false
	   pager: true,//是否显示页码, true or false
	   nav: true,//是否显示左右导航箭头(即上翻下翻), true or false
	   speed:700,//动画持续时间,单位毫秒
	   timeout: 7000,//图片之间切换的时间,单位毫秒
	   maxwidth: mx,//幻灯的最大宽度
	   namespace: "centered-btns"//修改默认的容器名称
    });
});
</script>
<div class="ws_shadow"></div>
</div>

其中“链接地址”是你的广告地址,“图片地址”是你广告图片上传的地址。

最后添加CSS

.slick{height:300px;margin:0 auto;overflow:hidden;position:relative;width:100%}
.slick{ width:100% !important; height:auto;}
.slick li{ width:100%;}

翠竹林版权所有,如未注明 , 均为原创,转载需注明出处。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址