圖1
圖2
介紹一下自己新近改編的一個閃片神器（模板），由兩個部分組成，一個是蒙版，另一個是一組待閃照片：
1. 用一張符合你趣味的照片作蒙版用，在本例子裏是用的一個有手機屏的照片(見上圖1）。
2. 在Photoshop裏把那個屏幕部分挖空，並單獨存為png文件格式的照片。存為png格式的目的就是讓挖空的那部分成為透明的空間，為後麵的貼內容照片用。
3. 把多個需用的照片在Photoshop裏分別裁剪成略大於屏幕部分尺寸的照片（見上圖2）。
4. 分別把以上照片傳到文學城或其它你能夠上傳的網站，並記錄下每個照片的網上鏈接地址待用。
5. 把照片的鏈接分別複製替換到虛線以下列出的HTML代碼裏去。用蒙版照片鏈接替代代碼裏的紅色標記部分； 用每個內容照片鏈接分別去替換綠色標記部分。內容照片的代碼是在<div id="slideshow">標簽裏框定的，照片的數量可減可增，隨你定。
6. 然後根據你內容照片的大小在 #slideshow > div { position:absolute; left:8; top:8px;;}調節左，右的像素位置，本例分別是8。
7. 另外，如果你的蒙版照片的大小不同，則還要根據你實際照片的大小來修改PicFrame裏的長寬高度數值。
8. 完成上麵所有部分替換後，發帖時，把修改後的所有代碼複製到文學城的HIML源代碼框裏就行了。
如果你有一點點HTML語言代碼的知識，應該是很容易應用的。
-------------------------------------------------------------------------------------------------------
<style type="text/css">#wrapper {margin:40px auto;position:relative;width:380px;height:498px;}
#PicFrame {width:380px;height:498px;position:absolute;top:0px;left:0px;no-repeat;z-index:8;}
#PicFrame > div >img {border:#ffffff 8px solid;box-shadow:2px 4px 6px rgba(0,0,0,0.4);}
#slideshow {margin:0 auto;position:relative;width:380px;height:498px;}
#slideshow > div { position:absolute; left:8; top:8px;;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script>
$(document).ready(function() {
$(function(){
var speed = 3000;
var transition = 800;
var total = $("#slideshow > div").length;
$("#total").text(total);
$("#slideshow > div:gt(0)").hide();
$("#slideshow > div").mouseover(function() { stopInterval(); });
$("#slideshow > div").mouseout(function() { startInterval(); });
function stopInterval() {clearInterval(nextSlideTimer);};
function startInterval() {nextSlideTimer};
var nextSlide = function() {
$('#slideshow > div:first')
.fadeOut(transition)
.next()
.fadeIn(transition)
.end()
.appendTo('#slideshow');
};
var nextSlideTimer = setInterval(nextSlide, speed);
$("#nav-left").click(function() {
clearInterval(nextSlideTimer);
$('#slideshow > div:first')
.fadeOut(transition);
$('#slideshow > div:last')
.fadeIn(transition)
.prependTo('#slideshow');
nextSlideTimer = setInterval(nextSlide, speed)
setTimeout(nextSlideTimer, speed)
});
$("#nav-right").click(function() {
clearInterval(nextSlideTimer);
$('#slideshow > div:first')
.fadeOut(transition)
.next()
.fadeIn(transition)
.end()
.appendTo('#slideshow');
nextSlideTimer = setInterval(nextSlide, speed)
setTimeout(nextSlideTimer, speed)
});
});
});
</script>
<div> </div>
<div id="wrapper">
<div id="PicFrame">
<div><img src="http://www.wenxuecity.com/upload/album/6e/d1/49/7202f1f658115UyG0xiz.png" style="width:100%" /></div>
</div>
<div id="slideshow">
<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88de33f72426Yxlv9fM3.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/6e/d1/49/7202f1f65453xlRX8Azn.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/6e/d1/49/7202f1f65392rtL3d7W1.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88de33f726700GkhwZQc.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88de33f73175ou5m1np8.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88de33f72029CaKoU35u.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/85/40/69/7f3659fa78888FRdWFOg.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/d6/09/4d/88de33f71671LulubRss.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/85/40/69/7f3659fa7923mwgl2c63.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/85/40/69/7f3659fa7965JS52PCNg.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/6e/d1/49/7202f1f65423VR4XBxOR.png" style="width:100%" /></div>
<div><img src="http://www.wenxuecity.com/upload/album/bd/25/17/347ce6f23485rn5Q5po6.png" style="width:100%" /></div>
</div>
</div>
<div> </div>
<div> </div>
