这是直接贴的代码，没用空间帖的形式。与微信相关的js省略了。<br>
<!--
<style type="text/css">
@import url('http://kp3.kagirl.cn/kphoto/css/style.css');
#container
{
width: 500px;
height: 880px;
position: relative;
overflow: hidden;
margin:120px auto;
}
@keyframes liuxing
{
0%{-webkit-transform:translate(0px,0px) rotate(0deg);opacity: 1;-webkit-animation-timing-function:linear;}
30%{-webkit-transform:translate(-500px,300px) rotate(-5deg);opacity: 1;-webkit-animation-timing-function:ease-in;}
100%{-webkit-transform:translate(-500px,300px) rotate(-5deg);opacity: 0;-webkit-animation-timing-function:ease-in;}
}
@keyframes hudie
{
0%{-webkit-transform:translate(-400px,0px) rotate(0deg);opacity: 1;-webkit-animation-timing-function:linear;}
30%{-webkit-transform:translate(500px,-400px) rotate(-5deg);opacity: 1;-webkit-animation-timing-function:ease-in;}
100%{-webkit-transform:translate(500px,-400px) rotate(-5deg);opacity: 0;-webkit-animation-timing-function:ease-in;}
}
@keyframes fadein
{
from {opacity: 0}
to {opacity: 1}
}
@keyframes fadeout
{
from {opacity: 1}
to {opacity: 0}
}
</style>
<div id='container' class='container'>
<img src='http://pan.yinhuabbs.cn/view.php/6f805b006f1ee37e67865639bc376f16.jpg' style='position:absolute;top:0px;left:0px;height:900px;'>
<img src='https://z3.ax1x.com/2021/09/08/h7HsIA.gif' style='position:absolute;top:100px;left:500px;height:300px;width:300px;-webkit-animation: liuxing 25s ease-in 1s infinite;'>
<img src='https://z3.ax1x.com/2021/09/08/h7Hrad.gif' style='position:absolute;top:600px;left:-350px;height:300px;width:300px;-webkit-animation: hudie 30s ease-in 1s infinite;'>
<div id="ipresenter">
<div id='xuandiv1' class="step" data-x="0" data-y="0" data-pausetime="3000">
<img id='xuanimg1' width='400'/>
</div>
<div id='xuandiv2' class="step" data-x="1500" data-y="0" data-rotatex="180" data-easing="easeInOutQuint" data-pausetime="3000">
<img id='xuanimg2' width='400'/>
</div>
<div id='xuandiv3' class="step" data-x="3000" data-y="0" data-rotatey="180" data-pausetime="3000">
<img id='xuanimg3' width='400'/>
</div>
<div id='xuandiv4' class="step" data-x="4500" data-y="0" data-rotatex="180" data-pausetime="3000">
<img id='xuanimg4' width='400'/>
</div>
<div id='xuandiv5' class="step" data-x="6000" data-y="0" data-rotate="180" data-pausetime="3000">
<img id='xuanimg5' width='400'/>
</div>
<div id='xuandiv6' class="step" data-x="7500" data-y="0" data-rotatey="180" data-pausetime="3000">
<img id='xuanimg6' width='400'/>
</div>
<div id='xuandiv7' class="step" data-x="9000" data-y="0" data-pausetime="3000">
<img id='xuanimg7' width='400'/>
</div>
<div id='xuandiv8' class="step" data-x="10500" data-y="0" data-rotate="80" data-pausetime="3000">
<img id='xuanimg8' width='400'/>
</div>
<div id='xuandiv9' class="step" data-x="12000" data-y="0" data-rotatex="180" data-pausetime="3000">
<img id='xuanimg9' width='400'/>
</div>
<div id='xuandiv10' class="step" data-x="13500" data-y="0" data-rotatey="180" data-pausetime="3000">
<img id='xuanimg10' width='400'/>
</div>
<div id='xuandiv11' class="step" data-x="13000" data-y="0" data-rotatey="-180" data-pausetime="3000">
<img id='xuanimg11' width='400'/>
</div>
<div id='xuandiv12' class="step" data-x="16500" data-y="0" data-rotatey="180" data-pausetime="3000">
<img id='xuanimg12' width='400'/>
</div>
</div>
<img src="https://z3.ax1x.com/2021/07/31/WjByvt.gif"
style="position:absolute;height:40px;width:40px;left:30px;top:80px;" />
<img src="https://z3.ax1x.com/2021/09/08/h7XwEF.gif"
style="position:absolute;height:80px;width:80px;right:50px;bottom:50px;" />
<div id='pagetitle' style='position:absolute;width:500px;height:600px;top:100px;left:-30px;font-size:35px;color:#fff;overflow:hidden;opacity:0;'>
<div style='display:table;width:500px;height:200px;top:280px;left:0px;position:absolute;text-align:center;overflow:hidden;'>
<div id='titlecontent' style='display:table-cell;width:500px;height:200px;vertical-align:middle;padding-left:10px;padding-right:10px;line-height:150%;oveflow:hidden;position:absolute;text-shadow:1px 1px 1px #000'></div>
</div>
</div>
</div>
<audio id="ap" src="http://jgggbbs.net/yinyue/yhy.mp3" loop autoplay></audio>
<script type="text/javascript">
document.write('<script type="text/javascript" src="http://kp3.kagirl.cn/kphoto/js/jquery-1.7.1.min.js"><\/script>');
document.write('<script type="text/javascript" src="http://kp3.kagirl.cn/kphoto/js/ipresenter.packed.js"><\/script>');
//document.write('<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"><\/script>');
</script>
<script type="text/javascript">
var slider_images_url = [
['http://pan.yinhuabbs.cn/view.php/6f805b006f1ee37e67865639bc376f16.jpg'],
['http://pan.yinhuabbs.cn/view.php/56f0cd527386b05ab0b8800238d81446.jpg'],
['http://pan.yinhuabbs.cn/view.php/56f0cd527386b05ab0b8800238d81446.jpg'],
['http://pan.yinhuabbs.cn/view.php/58386eecb495b4b2b7d7e9b53456bd75.jpg'],
['http://pan.yinhuabbs.cn/view.php/51827a9ae37ae73c67bd3db0f5cf3864.jpg'],
['http://pan.yinhuabbs.cn/view.php/c814004a45fbbddfcc633d9011477389.jpg'],
['http://pan.yinhuabbs.cn/view.php/59e4026cd45d19a7a37dd5cba254f05b.jpg'],
['http://pan.yinhuabbs.cn/view.php/16995bcc612d938be646bf3c93af1235.jpg'],
['http://pan.yinhuabbs.cn/view.php/0d8349632dd67b5aa67532a7c4440218.jpg'],
['http://pan.yinhuabbs.cn/view.php/3a1bcdcb82e3f901bed0f49609815aa8.jpg'],
['http://pan.yinhuabbs.cn/view.php/a640136af45b08447fc51d2407e6f3ac.jpg'],
['http://pan.yinhuabbs.cn/view.php/72d3e0609102cd47444c99f72f0d6184.jpg'],
['http://pan.yinhuabbs.cn/view.php/85ed2d36dbae908048571b5d0ca60b82.jpg'],
['http://pan.yinhuabbs.cn/view.php/fa1c9de2e7d69426e2bcc42bec53f7ff.jpg'],
['http://pan.yinhuabbs.cn/view.php/ea5b8be8e91ead69931f05d49ab1746e.jpg'],
['http://pan.yinhuabbs.cn/view.php/ef409c690e24e1e8d22af86417a36fdf.jpg'],
['http://pan.yinhuabbs.cn/view.php/c9d2caf7d2aa0e7ee2de468dea157a70.jpg'],
['http://pan.yinhuabbs.cn/view.php/658f7abc48e035df309ec53eedfc1f52.jpg'],
['http://pan.yinhuabbs.cn/view.php/f4a40f0731d0585baeaf446599702d7b.jpg'],
['http://pan.yinhuabbs.cn/view.php/3d9c969987e093074571170774aa3f0b.jpg'],
['http://pan.yinhuabbs.cn/view.php/792f1197dd32761f881d383bf268b6ef.jpg'],
['http://pan.yinhuabbs.cn/view.php/447076e5806d39c519b75549a3eb7672.jpg'],
['http://pan.yinhuabbs.cn/view.php/e2421af354c4ab2c5e1011eb6678846c.jpg'],
['http://pan.yinhuabbs.cn/view.php/cf1c61a410de91a971dfc00b9f648c9d.jpg'],
['http://pan.yinhuabbs.cn/view.php/db385c3a31ef1b900238a5ee3084c375.jpg'],
['http://pan.yinhuabbs.cn/view.php/df748097b505f9810f19d6785e6e984e.jpg'],
['http://pan.yinhuabbs.cn/view.php/eb96cfaca165424365e954d280310230.jpg'],
['http://pan.yinhuabbs.cn/view.php/21eb4a21e8af6cae292b668aead706b3.jpg'],
['http://pan.yinhuabbs.cn/view.php/af6897ddf7c8d463721b9046a1c0f576.jpg'],
['http://pan.yinhuabbs.cn/view.php/46663b20e97361415f17317b6de335d8.jpg'],
['http://pan.yinhuabbs.cn/view.php/38791f0b24b72c0f870a6d73b4905736.jpg'],
['http://pan.yinhuabbs.cn/view.php/0bec22d8e9b1c427543652626d97d84a.jpg'],
['http://pan.yinhuabbs.cn/view.php/7d96cd62b36753115895330673d98149.jpg'],
['http://pan.yinhuabbs.cn/view.php/50a12e473c56542cacf0616fd5c5a60d.jpg'],
['http://pan.yinhuabbs.cn/view.php/a14180df0b77db770789b256e9e14dde.jpg'],
['http://pan.yinhuabbs.cn/view.php/5db3c27c5eda1547d12ad6bd3c626b4d.jpg'],
['http://pan.yinhuabbs.cn/view.php/e37f5a6efef89c372cb40187c4354ff0.jpg'],
['http://pan.yinhuabbs.cn/view.php/8a00254a36d69cb21bbc87560340dcb7.jpg'],
['http://pan.yinhuabbs.cn/view.php/d1aed68f7f0a537d177076e4e7879f9b.jpg'],
['http://pan.yinhuabbs.cn/view.php/0f2aebb2bb5033a018a2f0c9be10e24f.jpg'],
['http://pan.yinhuabbs.cn/view.php/e84d8705154602ef279bee797173a908.jpg'],
['http://pan.yinhuabbs.cn/view.php/1d451e537f21f9c8624183ff127dfeaf.jpg'],
['http://pan.yinhuabbs.cn/view.php/7f755fa404f17419e444c7ded3eaae24.jpg'],
['http://pan.yinhuabbs.cn/view.php/9860664d2e4f84c876fd01530004f510.jpg'],
['http://pan.yinhuabbs.cn/view.php/6f805b006f1ee37e67865639bc376f16.jpg'],
['http://pan.yinhuabbs.cn/view.php/7a23c4825e0a8df0d1381fe1a733440b.jpg']];
var e_desc = '唯美花间 蝶舞翩翩<br><br> 网页制作：深秋红枫<br>2021年1月5日';
var image_size_width=[];
var image_size_height=[];
var image_ready_num=0;
var image_url_index=0;
var have_num = 0;
var canshow = true;
var reshow = false;
var timeout1;
var inter1;
var pageindex = 1;
document.ontouchmove = function(e)
{
e.preventDefault();
}
var module_inits = [];
function load_init_modules()
{
for(var i=0; i<module_inits.length; i++)
{
module_inits();
}
}
function call_me(fun)
{
module_inits.push(fun);
}
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger')
{
wx.ready(load_init_modules);
}
else
{
onload = load_init_modules;
}
function id(name)
{
return document.getElementById(name);
}
function load_images()
{
reshow = false;
image_size_width=[];
image_size_height=[];
Onload_imgs_url=[];
image_ready_num=46;
image_url_index=0;
have_num = 0;
// id('page1').style.webkitAnimation = '';
// id('page2').style.webkitAnimation = '';
// id('page1').style.display = 'none';
// id('page2').style.display = 'none';
// clearTimeout(timeout1);
// clearTimeout(timeout2);
begin_titletime = new Date();
begin_titletime = begin_titletime.getTime();
showtitle();
clearTimeout(timeout1);
clearInterval(inter1);
canshow = true;
for(var i=0;i<slider_images_url.length;i++)
{
var img=new Image();
img.index=i;
img.src=slider_images_url;
img.onload=image_onload;
}
}
function showtitle()
{
if(reshow == true)
return;
var content = id('titlecontent');
content.innerHTML = e_desc;
id('pagetitle').style.webkitAnimation = 'fadein .5s linear both';
}
function distitle()
{
if(reshow == true)
return;
id('pagetitle').style.webkitAnimation = 'fadeout 1s linear both';
}
function image_onload(event)
{
if(reshow == true)
return;
var img=event.target;
var index = img.index;
if(index < 46)
{
Onload_imgs_url = img.src;
image_size_height = img.height;
image_size_width = img.width;
have_num++;
}
else
{
Onload_imgs_url = img.src;
image_size_width = img.width;
image_size_height = img.height;
image_ready_num++;
}
if((have_num >= 46 || slider_images_url.length == have_num) && canshow == true)
{
reshow = false;
canshow =false;
var end_titletime = new Date();
end_titletime = end_titletime.getTime();
var dis_titletime = Math.abs(end_titletime-begin_titletime);
delaytime = 3000;
if(dis_titletime>delaytime)
{
distitle();
timeout1 = setTimeout(begin_show,500);
}
else
{
dis_titletime = delaytime- dis_titletime;
timeout1 = setTimeout(function()
{
distitle();
timeout2 = setTimeout(begin_show,500);
},dis_titletime);
}
}
}
function begin_show()
{
images_init();
get_ready();
timeout1 = setTimeout(function()
{
set_next_img();
inter1 =setInterval(set_next_img,5000);
},1000);
}
function set_next_img()
{
if(pageindex == 13)
pageindex =1;
if(image_url_index == Onload_imgs_url.length)
{
image_url_index = 0;
}
id('xuanimg'+pageindex).src = Onload_imgs_url;
pageindex++;
image_url_index++;
}
function reload_scene()
{
reshow = true;
Onload_imgs_url = [];
for(var i =0; i<slider_images_url.length;i++)
{
Onload_imgs_url = slider_images_url;
}
image_url_index = 0;
images_init();
}
function get_ready()
{
$(document).ready(function(){
$('#ipresenter').iPresenter({
animSpeed: 2500,
// timer: '360Bar',s
// timerDiameter: 60,
// timerStroke: 5,
// timerPadding: 5,
// timerColor: '#000',
// timerBg: '#FFF',
timerOpacity: 0
// directionNav: false,
// controlNav: true
});
});
}
function images_init()
{
for(var i=1; i<13;i++)
{
var img = id('xuanimg'+i);
if(image_url_index == Onload_imgs_url.length)
image_url_index = 0;
img.src= Onload_imgs_url;
image_url_index++;
}
image_url_index = 0;
}
var ap = document.querySelector('#ap');
document.querySelector('#container').onclick=function() {
if(ap.paused) ap.play();
}
call_me(load_images);
</script>
-->
寒冬残荷 发表于 2021-10-11 10:18
还是JS厉害，喜欢JS的作品。可惜本人学不会。
网上找现成的js库，只了解用法不用关心其原理。
195400 发表于 2021-10-11 10:49
网上找现成的js库，只了解用法不用关心其原理。
我还有一个类似的，是两个图片同时出现随机叠放及替换。效果也不错（也是微信卡娃相册APP剥取的）。过些天整理一下发上来看看。
我怎么点某一楼的“回复“没有反映呢？
”网上找现成的js库，只了解用法不用关心其原理。“——我现在用的JS代码都是网上找来的。
可能是个人之间回复频繁，被论坛屏蔽回复按钮了。
<div style="position:relative;width:1000px;height:700px; top: 0px;left: 0px; margin : 10px auto;">
<iframe src="http://pan.yinhuabbs.cn/view.php/4be41f22f825dad5ef2b7b61354e5072.html" scrolling="no" frameborder="0" style="width:1000px;height: 650px; ">
</iframe>
<audio src="http://jgggbbs.net/yinyue/yhy.mp3" loop autoplay></audio>
</div>
”网上找现成的js库，只了解用法不用关心其原理。“——照搬或套用我还是会的^-^。小时候读书做作业都是看例题做的。
网站连表情也屏蔽？
寒冬残荷 发表于 2021-10-11 19:20
”网上找现成的js库，只了解用法不用关心其原理。“——照搬或套用我还是会的^-^。小时候读书做作业都是 ...
31楼和37楼大量id相同，也许是导致整个第4页的回复按钮失灵的原因，31楼注释掉后正常了。
195400 发表于 2021-10-11 20:15
31楼和37楼大量id相同，也许是导致整个第4页的回复按钮失灵的原因，31楼注释掉后正常了。
原来如此！老师高手！{:1_293:}