|
代码如下:
<div style="left: -206px; top: 160px; width: 1000px; position: relative;">
<style type="text/css">
.dyn_pic0 {
width:0px;
height:100%;
position:absolute;
left:100%;top:0px;
}
.turn_pic0 {
animation:turn_pic_v 4s 1 linear forwards;
}
@keyframes turn_pic_v {
from {
width:0px;left:50%;opacity:0.6;
}
to {
width:100%;left:0px;opacity:1;
}
}
</style>
<div style="width:1000px;height:625px;position:relative;background:skyblue;border:thick ridge brown;">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180004h6m6rpkpvym4lc.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180006keg2zgopotqtt02.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180007hoyjo4jue4vejypu.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180008bfcq3jfjzstsj.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180008xjdahhjajvizjxah.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/18000r0zndx8h5rdg5rlx.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/18000iqyl75d3c1y1j5uj.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180010aipkxzr0x5juxcyi.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180010zwrwfeyrf0ricv0j.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180011yqo7bpn0ib06cd0y.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180004vpm883n8nqqvrg2q.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180004h6m6rpkpvym4lc.jpg">
<img class="dyn_pic0" src="http://bbs.foz.cn/data/attachment/forum/202010/27/180006keg2zgopotqtt02.jpg">
</div>
<script type="text/javascript">
function hasClass( elements,cName ){
return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
};
function addClass( elements,cName ){
if( !hasClass( elements,cName ) ){
elements.className += " " + cName;
};
};
function removeClass( elements,cName ){
if( hasClass( elements,cName ) ){
elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
};
};
var curIdx = 0;
var dyn_pics0 = document.getElementsByClassName('dyn_pic0');
var lastIdx = dyn_pics0.length - 1;
function turn_cur_pic0() {
removeClass(dyn_pics0[lastIdx], 'turn_pic0');
dyn_pics0[lastIdx].parentElement.style.backgroundImage = "url(" + dyn_pics0[lastIdx].src + ")";
dyn_pics0[lastIdx].parentElement.style.backgroundSize = "cover";
addClass(dyn_pics0[curIdx], 'turn_pic0' );
lastIdx = curIdx;
curIdx++;
curIdx %= dyn_pics0.length;
setTimeout(turn_cur_pic0, 6000);
}
turn_cur_pic0();
</script></b></font></div></p><p><br><br><br><br><br><br></p></div>
|
|