记忆碎片-网络技术分享

最近给我的生物技术新站制作主题的时候用到了一个NIVO幻灯效果，觉得还是挺不错的，今天就在这里分享下。

效果图：

演示地址：生物技术 本站首页

下面是就是js代码部分

1.首先在你的模板header中加如以下内容（此处仅适用于点点，如想通用，直接省略）

注意：图片比例968*250（根据这个比例就行 或者自行修改css）

{#text:幻灯标题1|value:""}
{#image:幻灯图片1|value:"http://x.papaapp.com/farm1/2893f5/9a3f3a8e/1.jpg"}
{#text:幻灯标题2|value:""}
{#image:幻灯图片2|value:"http://x.papaapp.com/farm1/2893f5/947e2774/2.jpg"}
{#text:幻灯标题3|value:""}
{#image:幻灯图片3|value:"http://x.papaapp.com/farm1/2893f5/fbb159c9/3.jpg"}

2.js部分

加入jquery库内容（如果你的主题已有此js就可以省去）

<script type="text/javascript" src="http://t.papaapp.com/js/libs/jquery/jquery-1.7-latest.js"></script>

然后就是幻灯的js内容部分

<script type="text/javascript" src="http://x.papaapp.com/farm1/ef4a7b/9df5ffb7/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

3.div部分（此处仅适用于点点模板，如想通用，则自定替换里面的变量为你的内容）

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="{$_幻灯图片1}" alt="{$_幻灯标题1}" title="{$_幻灯标题1}" />
<img src="{$_幻灯图片2}" alt="{$_幻灯标题3}" title="{$_幻灯标题3}" />
<img src="{$_幻灯图片3}" alt="{$_幻灯标题3}" title="{$_幻灯标题3}"/>
</div>
</div>

PS：如果你想带上链接的话 就在img前面加个A标签就行啦，就如第一个（第二 三个甚至是第四个就依葫芦画瓢吧）来说

<a href="{$_幻灯链接地址1}"><img src="{$_幻灯图片1}" alt="{$_幻灯标题1}" title="{$_幻灯标题1}" /></a>

然后在第一步的地方添加一个自定义选项

{#text:幻灯链接地址1|value:""}

还有值得一题的是，幻灯标题是支持html代码的哦

4.css部分

这样就搞定啦，附上点点后台自定义项目图片，这样就可以简单的在后台进行幻灯的替换操作了（此后台仅适用于点点）

注：如果只想显示在首页，则加入一下代码

{?view.list}这里放你要显示在首页的内容{/view.list}

ps:此处的首页指列表页。且仅适用于点点模板。

发布于记忆碎片-网络技术分享 https://huilang.me

文章地址：https://huilang.me/nivo-slider/