88 幅菩萨宝像 - 第2页 - 【代码图腾】 - 中画网

寒冬残荷 发表于 2021-7-30 09:57

寒冬残荷 发表于 2021-7-30 10:02

本帖最后由寒冬残荷于 2021-7-30 10:04 编辑

这个是向右移动，上一个是向左移动。但两个图片移动顺序都是从小到大的。

195400 发表于 2021-7-30 11:13

本帖最后由 195400 于 2021-7-30 22:58 编辑 <br /><br />寒冬残荷发表于 2021-7-30 10:02
这个是向右移动，上一个是向左移动。但两个图片移动顺序都是从小到大的。
1楼改成了向左移动，把left <---> right 互换一下就行了。
<style type="text/css">
.鼻烟壶{
width:340px;height:390px;float:left;overflow:hidden;background-position-x :0px; margin:24px 0px;
background:url(http://tpic.home.news.cn/xhBlog/xhpic001/M02/E4/E0/wKhTg1cBtJoEAAAAAAAAAAAAAAA648.png);
}
#pichold{
width:14960px;/* 41*340 = 13940 , 44*340=14960 */
height:450px;
background-image:url(https://z3.ax1x.com/2021/07/29/WqsPnU.jpg);
position:absolute;
animation: picMoveRight 75s linear infinite;
}

#slideframe {
width:1000px;
height:450px;
overflow:hidden;
position:relative;
}

#pichold:hover {
animation-play-state: paused;
}
@keyframes picMoveRight {
from    {right:0px;}
to {right:-13940px;}
}
@keyframes picMoveLeft {
from    {left:0px;}
to {left:-13940px;}
}

#frame1st {
width:1080px;height:auto !important;min-height:450px;
border-color: #7b5640 #efc09a #efc09a #7b5640;border-style:solid;border-width:1px;
padding:24px;
background-image:url(https://z3.ax1x.com/2021/06/28/Rtl1ld.jpg);
position:relative; margin:100px 0 32px -120px;
border-radius:5%;
overflow:hidden;
}
#frame2nd {
width:auto;
height:auto !important;min-height:450px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtllSH.jpg);
border-color: #efc09a #7b5640 #7b5640 #efc09a;border-style:solid;border-width:1px;
padding:10px;
border-radius:5%;
overflow:hidden;
}
#frame3rd {
width:auto;height:auto !important;min-height:450px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtQQrq.gif);
border-color: #7b5640 #efc09a #efc09a #7b5640;border-style:solid;border-width:1px;
padding:10px;
border-radius:5%;
overflow:hidden;
}
#frame4th {
width:auto;height:auto !important;min-height:450px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtQn2j.jpg);
border-color: #efc09a #7b5640 #7b5640 #efc09a;border-style:solid;border-width:1px;
padding:10px;
border-radius:5%;
overflow:hidden;
}
#frame5th {
width:auto;height:auto !important;min-height:450px;
background-image:url(https://z3.ax1x.com/2021/06/28/RtlMfe.jpg);
border-color: #7b5640 #efc09a #efc09a #7b5640;border-style:solid;border-width:1px;
padding:10px;
border-radius:5%;
overflow:hidden;
}
.playbutton {
width:430px;height:430px;
background-image:url(http://img95.699pic.com/xsj/06/2y/ir.jpg);
background-position-y:-260px;
position:absolute;
transform:scale(0.08);
overflow:hidden;border-radius:50%;
}
.ctrlbutton {
width:230px;height:230px;
background-image:url(http://pic.soutu123.cn/element_origin_min_pic/16/12/30/9892ef66b0537853ff37511ad2cfe2cf.jpg);
background-position-x:-287px;
overflow:hidden;border-radius:50%;transform:scale(0.12);
}
</style>
<div id="frame1st">
<div id="frame2nd">
<div id="frame3rd">
<div id="frame4th">
<div id="frame5th">

<div id="slideframe">
<div id="pichold">
<div style="background-position-y: -170px;" class="鼻烟壶"></div>
<div style="background-position-y: -640px;" class="鼻烟壶"></div>
<div style="background-position-y: -1110px;" class="鼻烟壶"></div>

<div style="background-position-y: -1590px;" class="鼻烟壶"></div>
<div style="background-position-y: -2060px;" class="鼻烟壶"></div>
<div style="background-position-y: -2520px;" class="鼻烟壶"></div>

<div style="background-position-y: -2990px;" class="鼻烟壶"></div>
<div style="background-position-y: -3440px;" class="鼻烟壶"></div>
<div style="background-position-y: -3920px;" class="鼻烟壶"></div>

<div style="background-position-y: -4380px;" class="鼻烟壶"></div>
<div style="background-position-y: -4850px;" class="鼻烟壶"></div>
<div style="background-position-y: -5320px;" class="鼻烟壶"></div>

<div style="background-position-y: -5780px;" class="鼻烟壶"></div>
<div style="background-position-y: -6240px;" class="鼻烟壶"></div>
<div style="background-position-y: -6700px;" class="鼻烟壶"></div>

<div style="background-position-y: -7160px;" class="鼻烟壶"></div>
<div style="background-position-y: -7610px;" class="鼻烟壶"></div>
<div style="background-position-y: -8070px;" class="鼻烟壶"></div>

<div style="background-position-y: -8530px;" class="鼻烟壶"></div>
<div style="background-position-y: -8970px;" class="鼻烟壶"></div>
<div style="background-position-y: -9430px;" class="鼻烟壶"></div>

<div style="background-position-y: -9880px;" class="鼻烟壶"></div>
<div style="background-position-y: -10350px;" class="鼻烟壶"></div>
<div style="background-position-y: -10820px;" class="鼻烟壶"></div>

<div style="background-position-y: -11280px;" class="鼻烟壶"></div>
<div style="background-position-y: -11740px;" class="鼻烟壶"></div>
<div style="background-position-y: -12200px;" class="鼻烟壶"></div>

<div style="background-position-y: -12670px;" class="鼻烟壶"></div>
<div style="background-position-y: -13140px;" class="鼻烟壶"></div>
<div style="background-position-y: -13590px;" class="鼻烟壶"></div>

<div style="background-position-y: -14040px;" class="鼻烟壶"></div>
<div style="background-position-y: -14500px;" class="鼻烟壶"></div>
<div style="background-position-y: -14950px;" class="鼻烟壶"></div>

<div style="background-position-y: -15400px;" class="鼻烟壶"></div>
<div style="background-position-y: -15850px;" class="鼻烟壶"></div>
<div style="background-position-y: -16310px;" class="鼻烟壶"></div>

<div style="background-position-y: -16770px;" class="鼻烟壶"></div>
<div style="background-position-y: -17200px;" class="鼻烟壶"></div>
<div style="background-position-y: -17660px;" class="鼻烟壶"></div>

<div style="background-position-y: -18120px;" class="鼻烟壶"></div>
<div style="background-position-y: -18560px;" class="鼻烟壶"></div>

<div style="background-position-y: -170px;" class="鼻烟壶"></div>
<div style="background-position-y: -640px;" class="鼻烟壶"></div>
<div style="background-position-y: -1110px;" class="鼻烟壶"></div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="lbutton" class="ctrlbutton"
style="background-position-y:-287px;position:absolute;bottom:-100px;left:300px;"></div>


<div id="pbutton" class="playbutton"
style="background-position-x:-70px;position:absolute;bottom:-200px;left:350px;"></div>


<div id="rbutton" class="ctrlbutton"
style="background-position-y:-18px;position:absolute;bottom:-100px;right:300px;"></div>
</div>
<audio src="https://ss2.meipian.me/users/60902957/151390d0-8c44-11ea-80aa-d1fb47062e8d.mp3" loop="" id="bplayer" style="visiblity:hidden;"></audio>
<script type="text/javascript">
var pbutton = document.querySelector('#pbutton');
var lbutton = document.querySelector('#lbutton');
var rbutton = document.querySelector('#rbutton');
var bplayer = document.querySelector('#bplayer');
var pichold = document.querySelector('#pichold');

pbutton.onclick = function() {
if(bplayer.paused) {
bplayer.play();
//pbutton.src = "http://photo.16pic.com/00/20/92/16pic_2092589_b.jpg";
pbutton.style.backgroundPositionX = "-530px";
}
else {
bplayer.pause();
//pbutton.src = "http://img.download.pchome.net/3l/jr/143567_120x90.jpg";
pbutton.style.backgroundPositionX = "-70px";
}
}
lbutton.onclick = function() {
pichold.style.animation = "picMoveLeft 175s linear infinite";
}
rbutton.onclick = function() {
pichold.style.animation = "picMoveRight 175s linear infinite";
}

</script>

诺北发表于 2021-7-30 13:29

代码做得很棒，我先转移到【代码图腾】版块了啊

页: 1 [2]

中画网's Archiver