100多年前的地摊
<!---->
经《红枫》网友启发，改了个有声版帖子。需要点击一下启动动画，显得比较笨拙。
<iframe src="http://pan.yinhuabbs.cn/view.php/c822cd1ecff871147952ebb12aa04397.html" scrolling='no' frameborder='0'
style="width:100%;height:1000px;"></iframe>
<audio src="http://link.hhtjim.com/kw/150357350.mp3" autoplay loop id="bjmusic" ></audio>
<script type="text/javascript">
document.getElementById("bjmusic").volume = 0.12;
</script>
<!-- 代码 开始
<style type="text/css">
@import url('http://cesholl.cn3v.net/style/IPresenter.css');
.step img {width:480px;border:thin gray solid;overflow:hidden;border-radius:24px;}
#container {
position:relative;
width:640px;height:880px;
overflow:hidden;margin:0 auto;
background:lightgray ;
border-radius:10%
}
#ipresenter {margin-top:-60px;}
</style>
<div id="container">
<h1 style="text-align:center;color:brown;font-size:36px;">100多年前的地摊</h1>
<div id="ipresenter" ></div>
<div style="width:80%;position:absolute;left:10%;bottom:56px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 660 900" >
<body xmlns="http://www.w3.org/1999/xhtml">
<div style="padding:8px;width:100%;height:100%;text-align:center;line-height:1.8em;
font:bold 1.4em 仿宋;color:blue;letter-spacing:3px;" id="txtBlock">
<p style="text-indent:2em;text-align:left;">吃，乃人生存之根本。所以，食品摊永远不愁没生意！</p>
</div>
</body>
</svg>
</div>
</div>
代码 结束 -->
<!--
<script type="text/javascript">
document.write('<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"><\/script>');
document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/ipresenter.packed.js"><\/script>');
</script>
<script type="text/javascript">
var pics = [
"data/attachment/forum/202110/06/095733j9cck8kvhc2v9or8.jpg",
"data/attachment/forum/202110/06/095733aw2wk114w2oaz11w.jpg",
"data/attachment/forum/202110/06/095734u5z5h6cgq0k6qz9h.jpg",
"data/attachment/forum/202110/06/095734qsrx0vxzyyzrscc4.jpg",
"data/attachment/forum/202110/06/095735gr3vhx3gx3idswjp.jpg",
"data/attachment/forum/202110/06/095735umk6m4ss6p1l5b5c.jpg",
"data/attachment/forum/202110/06/095735m2pfp2hfbh22kypg.jpg",
"data/attachment/forum/202110/06/095735zrw4ws5csaqqyqt4.jpg",
"data/attachment/forum/202110/06/095736advyvm4pm6mopa4v.jpg",
"data/attachment/forum/202110/06/095736jpq3uk74qq887kqc.jpg",
"data/attachment/forum/202110/06/095736ecr5kk8cfpzrza1h.jpg",
"data/attachment/forum/202110/06/095736cedcowe0k0nlyl5i.jpg",
"data/attachment/forum/202110/06/095737apqv9u52qs9usseu.jpg",
"data/attachment/forum/202110/06/095737m7w9jyopryv6bj9t.jpg",
"data/attachment/forum/202110/06/095737cewm9so6qsmwdxwq.jpg",
"data/attachment/forum/202110/06/095738y0xbwoh5nxgz68gb.jpg",
"data/attachment/forum/202110/06/095738cohsd82iix8zs6oj.jpg",
"data/attachment/forum/202110/06/095738nw4zz3bq6xi0vvri.jpg",
"data/attachment/forum/202110/06/095738yo1mzb7jjf7xzz2u.jpg",
"data/attachment/forum/202110/06/095739l6ndq2h55j6rv7dd.jpg",
"data/attachment/forum/202110/06/095739pn3qns991qntwnqy.jpg",
"https://s3.bmp.ovh/imgs/2021/10/4fc93d4aecf9c302.jpg",
"data/attachment/forum/202110/06/095739xiti90t9sk2riknk.jpg",
"data/attachment/forum/202110/06/095740lergxgq8eteap9gh.jpg",
"data/attachment/forum/202110/06/095740rh7ueki6nteaepeq.jpg",
"data/attachment/forum/202110/06/095740nz4ixi8fkkdn4kff.jpg",
"https://s3.bmp.ovh/imgs/2021/10/bcaa77c16f27881a.jpg",
"data/attachment/forum/202110/06/095740gxxt65tv5vvhxtgh.jpg",
"data/attachment/forum/202110/06/095741tkvvvniqzq98v88j.jpg",
"data/attachment/forum/202110/06/095741z1340k1k1kb9b4o1.jpg",
"data/attachment/forum/202110/06/095741j8rs944mrrsrmm1s.jpg",
"data/attachment/forum/202110/06/095742vqbqrq2cgssi3sqg.jpg",
"data/attachment/forum/202110/06/095742q7i0rcbcue7biwef.jpg",
"data/attachment/forum/202110/06/095742u0nznoinu133y8u7.jpg"];
var ipresenter = document.querySelector('#ipresenter');
var picDesc = [
"吃，乃人生存之根本。所以，食品摊永远不愁没生意！",
"热气腾腾的烧饼摊。烧瓶小哥满脸疑惑，似乎在问：要不要来一个？",
"茶饮摊。喝茶就喝茶，可千万别惹摊主，看这模样，功夫一定了得！",
"冰糖葫芦摊。如此特色的传统小吃，让人垂涎三尺。",
"白酒摊。大爷：口馋不？来一杯解解馋？",
"粽子摊。顾客吃得津津有味，老板满脸欣慰。",
"宵夜摊。寒冷的冬夜，必须来一碗热汤暖暖身子。",
"摊主这呦呵劲，可高兴了！不过这地摊设备罕见，到底是买啥的呢？",
"粉丝摊。堆积如山的货量，不用愁没货！",
"鱼干摊。边晾晒边买卖，制作与赚钱互不相误。",
"糖果摊。吸引了那么多小朋友，摊主是妥妥的孩子王！",
"卖枣摊。摊主细心周到，份量都已经给您分好啦！",
"竹、草编器具摊。堆叠的这么高，非常引人注目！",
"理发摊。设备十足，理发师也非常有架势！",
"修脚摊。原来脚部按摩服务早就有了！",
"补鞋摊。摊主精心修补，生意稳赚不赔！",
"拔牙摊。直接硬拔，隔着屏幕都能感受到一丝痛意！",
"葫芦摊。一个藤上七个瓜，各具特色的小葫芦，任君挑选！",
"贴纸摊。出售各种手工剪纸，精美又有趣！",
"小玩具摊。摊主：你要啥样的？我可以立马编做！",
"花生摊。刚煮的花生，口感好极了！",
"水果摊。让人难以想象，这摊子竟然是摆在一百年前的天安门前！",
"盂类器具摊。缺痰盂、夜壶不？质量杠杠的，可以放心购买！",
"古玩摊。各种陶瓷、首饰应有尽有，摊主还是个小可爱！",
"挂饰摊。琳琅满目的小吊坠，非常吸引人！",
"服装摊。稍显凌乱，可能是只试不买的人太多了。",
"杂货摊。你想要的，这里都有，保证满足你的需求！",
"日常用品摊。锅碗瓢盆、拖把、水桶...走过路过别错过！",
"卖鞋摊。款式、尺码齐全，还可现场订做。",
"凉席摊。尺寸惊人，一百年前的床原来那么大！",
"卖布摊。漂白布、染色布、色织布...种类齐全。",
"贴身用品摊。耳罩、腰带、钱袋...一人、一竹竿就是一摊位",
"磨刀摊。人群密集，看来古人的“磨刀不误砍柴工”诚不欺我！",
"小玩意杂货摊。商品分类展列，可按需求选购。"];
var aniIdx = 1;
var txtBlock = document.querySelector('#txtBlock');
console.log(pics.length + " " + picDesc.length);
function afterChage() {
txtBlock.querySelector('p').innerHTML = picDesc;
aniIdx++; aniIdx %= picDesc.length;
}
$(document).ready(function(){
for(n = 0; n < pics.length; n++) {
e_div = document.createElement('div');
e_div.setAttribute('data-x', n*800);
e_div.setAttribute('data-y', 0);
e_div.setAttribute('data-pausetime',3000);
switch(n % 6) {
case 0:
//e_div.setAttribute('data-rotate', 180);
break;
case 1:
e_div.setAttribute('data-rotatex', 180);
break;
case 2:
e_div.setAttribute('data-rotatey', 180);
break;
case 3:
e_div.setAttribute('data-rotate', -180);
break;
case 4:
e_div.setAttribute('data-rotatex', -180);
break;
case 5:
e_div.setAttribute('data-rotatey', -180);
break;
}
e_div.className='step';
e_img = document.createElement('img');
e_img.src = pics;
e_div.appendChild(e_img);
ipresenter.appendChild(e_div);
}
$('#ipresenter').iPresenter({
animSpeed: 2000,
timer: 'none',
//timerDiameter: 60,
//timerStroke: 5,
//timerPadding: 5,
//timerColor: '#000',
//timerBg: '#FFF',class="container"
//timerOpacity: 0.4,data-easing="easeInOutQuint"
onAfterChange: afterChage,
directionNav: false,
controlNav: false
});
});
</script>
--> 欣赏学习老师的新作品！又有新花样：图片配文字。看来没时间完成作业，每天煮三餐、打扫卫生，时间不够。 老师，这个贴也出现楼层最后一行失效。我觉得是不是您的作品内有ID号与网页的ID相同？我瞎猜的。 寒冬残荷 发表于 2021-10-13 19:32
欣赏学习老师的新作品！又有新花样：图片配文字。看来没时间完成作业，每天煮三餐、打扫卫生，时间不够。
这个浏览图片的js库本身就带有这功能，只是几乎没有介绍它的。
手机浏览器里进去的，等了好些时候才有效果，定是JS等外链滞后造成的。 红枫 发表于 2021-10-13 20:04
手机浏览器里进去的，等了好些时候才有效果，定是JS等外链滞后造成的。
第一次进去要下载图片到浏览器所以时间长一些，再次进入就快了，在电脑上秒开。
祝老师重阳节快乐！ 静竹. 发表于 2021-10-14 08:49
祝老师重阳节快乐！
https://img1.baidu.com/it/u=1698514527,2094640219&fm=253&fmt=auto&app=120&f=JPEG
这么多图片上的文字要变成有声的，真是太棒了！不可思议！ 静竹. 发表于 2021-10-15 08:45
这么多图片上的文字要变成有声的，真是太棒了！不可思议！
瞎折腾的;P