溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

隨機(jī)圖片滾動(dòng)（隨機(jī)數(shù)+變化函數(shù)），可運(yùn)行

發(fā)布時(shí)間：2020-06-14 09:32:16 來源：網(wǎng)絡(luò) 閱讀：803 作者：沉迷學(xué)習(xí)中 欄目：開發(fā)技術(shù)

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>隨機(jī)圖片滾動(dòng)</title>

<!--可成功執(zhí)行，布局有點(diǎn)混亂...懶得改了。需要一個(gè)js文件，在上一文章中有-->

<style type="text/css">

*{

padding:0;

margin: 0;

}

li,ul{

list-style: none;

}

#parent{

margin: 0 auto;

width: 830px;

height: 900px;

border:3px solid #C1C1C1;

margin-top: 50px;

}

#parent>ul>li{

float: left;

width: 400px;

height: 225px;

}

#parent>ul>li ul{

width: 380px;

height: 200px;

position: relative;


}

#parent>ul>li li{

width: 380px;

height: 200px;

position: relative;

}

img{

}

</style>

<script src="miaov.js"></script>

<script type="text/javascript">

window.onload=function(){

 var setTime=null;

 setTime=setInterval(function(){

 //bianhuan(7);

 //返回一個(gè)X-Y之間的隨機(jī)數(shù)

var num =stochastic(0,7);

bianhuan(num);

},500);

}

function bianhuan(a){

//var obj=getID('son');

//讓層上下左右移動(dòng) ，參數(shù)   標(biāo)簽對(duì)象，上/下/左/右,終點(diǎn)距離,回調(diào)函數(shù) 

 

var Oli=document.getElementsByName("fail");

var Oul=Oli[a].getElementsByTagName("ul")[0];

var Tli=Oul.getElementsByTagName("li");

doMove ( Oul, 'top', 15, -200,function(){

Oul.style.top='0px';

Oul.insertBefore(Tli[0],Tli[Tli.length]);

});

}

function getID(obj){

return document.getElementById(obj);

}


</script>

</head>

<body>

<div id="parent">

                <!--圖片途徑改-->

<ul id="son">

<li name="fail">

<div Apple-tab-span" >width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="p_w_picpaths/scenery_1.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_2.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_3.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail" ><div Apple-tab-span" >width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="p_w_picpaths/scenery_4.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_5.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_6.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div Apple-tab-span" >width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="p_w_picpaths/scenery_7.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_8.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_9.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div Apple-tab-span" >width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="p_w_picpaths/scenery_10.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_11.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_12.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div Apple-tab-span" >width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="p_w_picpaths/scenery_13.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_14.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_15.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div Apple-tab-span" >width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="p_w_picpaths/scenery_16.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_17.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_18.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div Apple-tab-span" >width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="p_w_picpaths/scenery_19.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_20.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_21.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

<li name="fail"><div Apple-tab-span" >width: 380px;

height: 200px;

overflow: hidden;">

<ul>

<li><img src="p_w_picpaths/scenery_22.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_23.jpg" width=380 height=200/></li>

<li><img src="p_w_picpaths/scenery_24.jpg" width=380 height=200/></li>

</ul>

</div>

</li>

</ul>

</div>

</body>

</html>



向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手