里面有上面模板的码子和俺的简要使用介绍,请进:

本文内容已被 [ 水中捞月 ] 在 2015-01-18 07:17:17 编辑过。如有问题,请报告版主或论坛管理删除.

下面很大一段代码看起来吓人,但用来替换照片发帖其实很简单。如果只要上面那样大小的照片效果,前面很大一部分的代码不用动,只要把你的照片统一裁成 600(宽)x420(高)的图幅上传,并把下面代码里有颜色的部分替换成你自己的照片链接(蓝色部分)和解说文字(紫色部分),【注:换代码时无关颜色,在此仅作区分理解起见】。模板里有6张图片,每个 图片和文字分别由其<div>标签限定在一起。按照你发图的多少来确定增加或减少图片和文字的<div>标签部分代码。如果你懂 得一些CSS样式表的构成,则可以修改前面<style>标签部分,以做更多的图幅尺寸和背景颜色上的修改。
贴图时,点击“HTML源代码”,把下面修改后的代码复制进来,然后,点击“预览模式”看是否成功。这样就可以发帖了。




<style>
#container{margin:0 auto;width:760px;}
#preface{width:600px;position:relative;margin:0 auto;text-align:left;font-size_replace:12px;color:#4E4E4E;}
#wrapper {margin:20px auto;position:relative;width:100%;height:540px;background-color:#4D4D4D;border:#333 3px solid; box-shadow:2px 4px 6px rgba(0,0,0,0.4); }
#slideshow {margin:0 auto;position:relative;width:600px;height:420px;}
#slideshow > div { position:absolute; left:0; top:40px;;}
#slideshow p {width:600px;font-size_replace:12px;color:#FCFCFC;line-height:120%;}
#slideshow > div >img {border:#FAFAFA 1px solid;}
#control{width:100%;position:absolute;margin:0 auto; height:33px;top:250px;z-index:200}
#nav-left, #nav-right{position:absolute;width: 33px;height: 33px;cursor: pointer;}
#nav-left{background: url('http://wenxuecity.com/upload/album/5a/9a/9a/f0873c231795.png');no-repeat;left:20px;}
#nav-right{background: url('http://wenxuecity.com/upload/album/5a/9a/9a/f0873c230445.png');no-repeat;right:20px;}
#page{width:97%;margin:0 10px;text-align:right;font-size_replace:12px;color:#858585;position:absolute;top:520px;z-index:300;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(function(){
        var speed = 5000;
        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 id="container">
<div id="preface"><p>这里可来一段徐志摩那样的抒情,如:轻轻的我走了,正如我轻轻的来;我轻轻的招手,作别西天的云彩。那河畔的金柳,是夕阳中的新娘; 波光里的艳影,在我的心头荡漾。。。。。。(以下图片取自网页)</p></div>

<div id="wrapper">
<div id="slideshow">

   <div><img src="http://www.wenxuecity.com/upload/album/e8/83/0a/f41d4eb54303AGCJxz9d.jpg" width=100%><p>1. 章子怡(Zhang Ziyi),1979年2月9日出生于北京,中国电影女演员,2000年毕业于中央戏剧学院。1998年被张艺谋发掘,主演电影《我的父亲母亲》而成名,该片荣获第50届柏林国际电影节银熊奖。</p></div>

   <div><img src="http://www.wenxuecity.com/upload/album/e8/83/0a/f41d4eb54468FpqndToC.jpg" width=100%><p>2. 黄圣依(Eva Huang),中国内地影、视、歌、商多栖女艺人。1983年2月11日出生于上海浦东新区,2005年毕业于北京电影学院表演系,凭借电影《功夫》出道,入围第24届电影金像奖,第28届大众电影百花奖“最佳新人奖”,迅速被观众熟知和喜爱。</p></div>

   <div><img src="http://www.wenxuecity.com/upload/album/e8/83/0a/f41d4eb54497djfQ6NGk.jpg" width=100%><p>3. 高圆圆, 中国女演员,1979年10月5日出生于北京市丰台区云岗一个普通的知识分子家庭。1996年高圆圆被广告公司发掘,随后拍摄了大量广告,成为了广告圈中的模特。1997年高圆圆出演了她的第一部电影《爱情麻辣烫》,从此开始了她的演员生涯。</p></div>

   <div><img src="http://www.wenxuecity.com/upload/album/e8/83/0a/f41d4eb54650kkE8azKO.jpg" width=100%><p>4. 陆毅,1976年1月6日出生于上海,中国内地影视男演员、歌手。毕业于上海戏剧学院表演系。1998年陆毅因饰演海岩剧《永不瞑目》的男主角肖童成名,并凭借此剧获得第18届中国电视剧金鹰奖最佳男主角及观众最喜爱的男演员两项奖。</p></div>

   <div><img src="http://www.wenxuecity.com/upload/album/e8/83/0a/f41d4eb54704ARZqN2XG.jpg" width=100%><p>5. 王力宏(Leehom Wang),1976年5月17日出生于美国纽约,籍贯浙江义乌。华语流行男歌手、音乐制作人、演员、导演。其通晓英语、中文、法语、日语,略通韩语、粤 语、客家语和闽南语。 他不但会演奏多种乐器,还担当自己大部分作品的制作人。从《龙的传人》中融合DJ电子乐节奏嘻哈。</p></div>

<div><img width="100%" src="http://www.wenxuecity.com/upload/album/dc/76/e2/f764b8c70065659cpwW4.jpg" alt="" />
<p>6. 海清,本名黄怡,中国女演员,江苏南京人。7岁时便出演电视剧,12岁在江苏省戏剧学校学习舞蹈,17岁从江苏省戏剧学校走进省歌舞剧院,1997年考上北京电影学院,2003年出演《玉观音》正式出道。</p>
</div>

</div>
    <div id="control"><div id="nav-left"></div><div id="nav-right"></div></div>
</div>
</div>

所有跟帖: 

这个很有用, 谢谢! -joshuamama- 给 joshuamama 发送悄悄话 joshuamama 的博客首页 (0 bytes) () 01/17/2015 postreply 19:36:24

不客气,:) -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (0 bytes) () 01/17/2015 postreply 20:06:42

看完,想试试,晕了! -28年华- 给 28年华 发送悄悄话 (0 bytes) () 01/17/2015 postreply 21:14:34

太容易晕了吧,只需要替换有颜色标记的那部分就行的。 -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (0 bytes) () 01/18/2015 postreply 08:11:19

谢谢。太复杂了,我现在水平,只能copy and paste. -ffmm101- 给 ffmm101 发送悄悄话 (0 bytes) () 01/17/2015 postreply 22:14:27

这个就只需要你copy & paste啊。 -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (0 bytes) () 01/18/2015 postreply 06:02:08

很好!不知道能不能成功,信心不大,不过还是谢谢你:) -心存一个闲梦- 给 心存一个闲梦 发送悄悄话 (0 bytes) () 01/17/2015 postreply 23:20:27

替换照片和文字很简单的,相信你能成功。 -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (109 bytes) () 01/18/2015 postreply 05:58:20

这个好,我收藏一下~~~ -Kimberley- 给 Kimberley 发送悄悄话 Kimberley 的博客首页 (0 bytes) () 01/18/2015 postreply 06:52:17

嗯,可以考虑用于图文并茂的影评也不错的。:) -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (0 bytes) () 01/18/2015 postreply 07:28:09

太及时了,正想整理一下旧照片。收藏了,还要好好学习,大谢。 -omum- 给 omum 发送悄悄话 (0 bytes) () 01/18/2015 postreply 07:58:32

交作业: -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (4486 bytes) () 01/18/2015 postreply 08:12:50

为啥我出来的是不动的?请指教。谢谢! -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (0 bytes) () 01/18/2015 postreply 08:16:04

在查看了你的source code后,才发现你码子里无端加了许多换行符<br /> -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (329 bytes) () 01/18/2015 postreply 11:37:09

感觉是原照片尺寸不一致 -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (0 bytes) () 01/18/2015 postreply 08:24:19

感觉准确,图片要尺寸一致,600x420, 否则要修改前面的CSS style 部分,Nice try. -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (0 bytes) () 01/18/2015 postreply 08:42:43

Could you enforce all original photo (if not 600X420) to 600X420 -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (116 bytes) () 01/18/2015 postreply 09:44:23

如果原图是与600x420等比例的高宽,可以考虑,不需要额外加code, -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (4307 bytes) () 01/18/2015 postreply 11:00:16

我已经知道换百分比了, 谢谢让我玩一把 -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (0 bytes) () 01/18/2015 postreply 17:11:22

I used chrome browser -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (0 bytes) () 01/18/2015 postreply 08:30:21

才发现chrome browser在文学城里有问题,不能复制code到HTML源代码里, -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (42 bytes) () 01/18/2015 postreply 08:43:03

谢谢分享!喜欢这模板,有机会一定试试。。这些美女帅哥照和介绍也很棒:)~~ -XL彩虹- 给 XL彩虹 发送悄悄话 XL彩虹 的博客首页 (76 bytes) () 01/18/2015 postreply 14:11:42

用firefox做作业 -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (5234 bytes) () 01/18/2015 postreply 15:16:47

我成功了。谢谢! -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (0 bytes) () 01/18/2015 postreply 15:20:42

看来你太粗心,你要把code复制到HTML源代码里去,而不是预览模式里。 -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (55 bytes) () 01/18/2015 postreply 15:48:24

当然是在html里 -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (0 bytes) () 01/18/2015 postreply 16:46:44

你不要用原来你用过的有错误的code,重新用我上面的code再修改, -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (120 bytes) () 01/18/2015 postreply 17:08:04

见上, 我成功了 -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (0 bytes) () 01/18/2015 postreply 17:08:45

Congratulations! -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (0 bytes) () 01/18/2015 postreply 17:10:42

试试 -股友- 给 股友 发送悄悄话 (6104 bytes) () 01/18/2015 postreply 16:43:41

试试2 -股友- 给 股友 发送悄悄话 (0 bytes) () 01/18/2015 postreply 16:53:11

很好用! -股友- 给 股友 发送悄悄话 (0 bytes) () 01/18/2015 postreply 16:55:13

你的第二张要换百分比, 到50%应该就在框里了 -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (0 bytes) () 01/18/2015 postreply 17:14:27

玩玩--汤唯的美照片 -螺丝螺帽- 给 螺丝螺帽 发送悄悄话 螺丝螺帽 的博客首页 (3596 bytes) () 01/18/2015 postreply 17:23:50

照片地址那段没看懂,照片是不是先要upload 文学 city? -goingplace- 给 goingplace 发送悄悄话 goingplace 的博客首页 (0 bytes) () 01/18/2015 postreply 19:11:04

不一定,任何可以上传图片的网站均可,然后用那个网站的图片链接地址就行。 -水中捞月- 给 水中捞月 发送悄悄话 水中捞月 的博客首页 (0 bytes) () 01/18/2015 postreply 19:26:17

谢谢分享!很实用。如果能将图片同时上传而无需另加数据源就更有用了:)。 -Ecocitymeng- 给 Ecocitymeng 发送悄悄话 Ecocitymeng 的博客首页 (0 bytes) () 02/17/2015 postreply 12:22:49

请您先登陆,再发跟帖!