给你的点点主题添加NIVO SLIDER幻灯效果

2012.09.24 分享 8089 人浏览 留言

最近给我的生物技术新站制作主题的时候用到了一个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部分

  1. /*nivo by huilang.me */  
  2. .theme-default .nivoSlider{position:relativebackground:#fff url(http://x.papaapp.com/farm1/5b42e2/dd6b7b0b/F68B6.gif) no-repeat 50% 50%; margin-bottom:10px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4aheight250px;}  
  3. .theme-default .nivoSlider img{position:absolutetop:0pxleft:0pxdisplay:none;}  
  4. .theme-default .nivoSlider a{border:0; display:block;}  
  5. .theme-default .nivo-controlNav{text-aligncenter;}  
  6. .theme-default .nivo-controlNav a{display:inline-blockwidth:22pxheight:22pxbackground:url(http://x.papaapp.com/farm1/5b42e2/acc66fce/F4CE5.png) no-repeattext-indent:-9999pxborder:0; margin: 0 2px;}  
  7. .theme-default .nivo-controlNav a.active{background-position:0 -22px;}  
  8.   
  9. .theme-default .nivo-directionNav a{display:blockwidth:30pxheight:30pxbackground:url(http://x.papaapp.com/farm1/5b42e2/09b24f1a/47AD6.png) no-repeattext-indent:-9999pxborder:0; opacity: 0; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}  
  10. .theme-default:hover .nivo-directionNav a { opacity: 1; }  
  11. .theme-default a.nivo-nextNav{background-position:-30px 0; rightright:15px;}  
  12. .theme-default a.nivo-prevNav{left:15px;}  
  13.   
  14. .theme-default .nivo-caption {font-familyHelveticaArialsans-serif;}  
  15. .theme-default .nivo-caption a { color:#fffborder-bottom:1px dotted #fff;}  
  16. .theme-default .nivo-caption a:hover {color:#fff;}  
  17.   
  18. .theme-default .nivo-controlNav.nivo-thumbs-enabled{width: 100%;}  
  19. .theme-default .nivo-controlNav.nivo-thumbs-enabled a{widthautoheightautobackgroundnonemargin-bottom5px;}  
  20. .theme-default .nivo-controlNav.nivo-thumbs-enabled img{displayblockwidth120pxheightauto;}  
  21.   
  22. .nivoSlider{position:relativewidth:100%; height:autooverflowhidden;}  
  23. .nivoSlider img{position:absolutetop:0pxleft:0pxmax-widthnone;}  
  24. .nivo-main-image{displayblock !important; positionrelative !important; width: 100% !important;}  
  25.   
  26. /* If an image is wrapped in a link */  
  27. .nivoSlider a.nivo-imageLink{position:absolutetop:0pxleft:0pxwidth:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none;}  
  28. /* The slices and boxes in the Slider */  
  29. .nivo-slice{display:blockposition:absolutez-index:5; height:100%; top:0;}  
  30. .nivo-box{display:blockposition:absolutez-index:5; overflow:hidden;}  
  31. .nivo-box img { display:block; }  
  32.   
  33. /* Caption styles */  
  34. .nivo-caption{position:absoluteleft:0pxbottombottom:0pxbackground:#000color:#fffwidth:100%; z-index:8; padding5px 10px; opacity: 0.8; overflowhiddendisplaynone; -moz-opacity: 0.8; filter:alpha(opacity=8); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  
  35. .nivo-caption p{padding:5pxmargin:0;}  
  36. .nivo-caption a{display:inline !important;}  
  37. .nivo-html-caption {display:none;}  
  38. .nivo-directionNav a{position:absolutetop:45%; z-index:9; cursor:pointer;}  
  39. .nivo-prevNav{left:0px;}  
  40. .nivo-nextNav{rightright:0px;}  
  41. .nivo-controlNav{text-align:center;}  
  42. .nivo-controlNav a{cursor:pointer;}  
  43. .nivo-controlNav a.active {font-weight:bold;}  

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

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

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

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

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

回复本文

电子邮件地址不会被公开。 必填项已用*标注

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif