终于发布课程了丫
事实上我已经忘记是谁跟我要这个课程了
也或许我记错了 嘿嘿 ╮(╯▽╰)╭
反正想说很久没发课程了 就来篇课程给我的部落格扫扫灰尘呗~!
这个slice show 在我上一个设计里面有用到哦
它不是死板板的slide , 而是有一些小方格/长方格来cover的
所以就显得比较"特别"喜欢的话就继续往下看吧 :D



> 此课程乃博主亲手操刀、不允许转帖!
> 抄袭此课程者必定在部落格公开.
> 请勿盗图!

--------------------------------------------------------------------------------------

BT / BS 皆可使用

BT使用者;

⒈ 模板 >> 修改HTML >> Ctrl+F 寻找 ]]></b:skin>
⒉ 在 ]]></b:skin> 的上面添加代码*1*
⒊ 浏览、确定没有出现乱码,,保存.
⒋ 然后在 布局 >> 添加小工具 >> HTML/JavaScript 添加代码*2*,,保存.

⒌ 再到 布局 >> 添加小工具 >> HTML/JavaScript 添加代码*3*,,保存.

BS使用者 ;

⒈ 模板 >> Ctrl+F 寻找 </style>
⒉ 在 </style> 的上面添加代码*1*
⒊ 然后在</style> 的下面添加代码*2* & 代码*3*
⒋ 浏览看看有没有乱码&效果,, 满意了即可保存.

#slider{position:relative;}
#slider img {display:none;width:250px;}
#slider a {display:block;}
.nivoSlider {width:400px; height:200px;}
.nivoSlider img {width:400px;height:200px;}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
.nivo-caption{position:absolute;left:0px;bottom:0px;width:98%;z-index:50;padding:3px;}
.nivo-caption p {margin:0;font-size:11px;}
.nivo-caption a {display:inline;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:45%;z-index:99;}
.nivo-prevNav {left:0px;} .nivo-nextNav {right:0px;}
.slider {width:100%;}
.slider img {position:absolute;top:0px;left:0px;display:none;width:250px;}
.nivo-controlNav {display:none;}
.nivo-directionNav a { display:block;width:31px;height:34px;background:url(http://i.imgur.com/YlJpGxM.png) no-repeat;text-indent:-9999px;}
a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}
.nivo-caption  {font-weight:2;}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">var $nv4wp = jQuery.noConflict();$nv4wp(window).load(function() {$nv4wp('#slider').nivoSlider({effect:'random', slices:15, // For slice animations boxCols: 4, // For box animations boxRows: 2, // For box animations animSpeed: 40, // Slide transition speed pauseTime: 300, // How long each slide will show startSlide:0, // Set starting Slide (0 index) directionNav:true, //Next & Prev directionNavHide:true, //Only show on hover controlNav:true, // 1,2,3... navigation controlNavThumbs:false, // Use thumbnails for Control Nav controlNavThumbsFromRel:false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav:true, //Use left & right arrows pauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded
});}); </script>

<div id="slide" style="position:fixed;top:50px;left:40px;"><div id="slider">
<a href="/"><img src="图案direct link"/></a>
<a href="/"><img src="图案direct link"/></a>
<a href="/"><img src="图案direct link"/></a>
<a href="/"><img src="图案direct link"/></a>
</div></div>

<a href="/"><img src="图案direct link"/></a>