温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

随机图片滚动(随机数+变化函数),可运行

发布时间:2020-06-14 09:32:16 来源:网络 阅读:804 作者:沉迷学习中 栏目:开发技术

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>随机图片滚动</title>

<!--可成功执行,布局有点混乱...懒得改了。需要一个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);

 //返回一个X-Y之间的随机数

var num =stochastic(0,7);

bianhuan(num);

},500);

}

function bianhuan(a){

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

//让层上下左右移动 ,参数   标签对象,上/下/左/右,终点距离,回调函数 

 

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问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI