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