; Elaine0211
HOME TUTORIALS MATERIALS LINKS FOLLOW CHATBOX

# 课程 ; 多变化图案slide show
2014/12/10 19:41 ♥ 0 SARANG(s)

终于发布课程了丫
事实上我已经忘记是谁跟我要这个课程了
也或许我记错了 嘿嘿 ╮(╯▽╰)╭
反正想说很久没发课程了 就来篇课程给我的部落格扫扫灰尘呗~!
这个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*
⒋ 浏览看看有没有乱码&效果,, 满意了即可保存.

代码*1*

#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;}

Explain ;
红色字体 ; slide show 的大小
橙色字体 ; slide show 图案的大小

Extra ; 
这两段代码的大小建议相同, 而且还要跟图案一样的大小
所以确保你每张图都是一样的size , 这个slice show 看起来也比较好看
如果图太大/太小, 会对slice show 有影响
图太大的话, 可能你的slice show 只会出现局部的图案,并非完整的.

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

代码*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>

Explain ;
红色字体 ; slide "切"开的数量 ,, 数字越大 ,, "切"开得越多,,切开的片就会变小

Example ;


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

代码*3*

<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>

Explain ;
蓝色字体 ; slice show 的位置 , 如果不要它"漂浮"着呢 , 可以把这一段删除哦
当然你们也可以在里面加一些美化的代码进去,, 前提是你们要熟悉代码啦 :)

Extra ;
如果想要更多图案/照片, 可以再添加
<a href="/"><img src="图案direct link"/></a>

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

课程完毕、
如果有不明白的地方可以cbox 问我哦
我会尽快答复 :)
相信之后很难再能更新课程了
因为blogger界的高手如云 不是我出手的时候 哈哈 XD
开玩笑啦 ,, 一旦有时间我就会更新啦
可是呢 也得看有没有什么课程可以写才好  囧
annyeong 下次见!

{{ Tutorial writed by BabeX eling ,, 2014 / 12 / 10 . }}

标签: , , , ,

◁ NEWER
OLDER ▷
© 2017 Designed By Elaine0211.