网页设计HTML怎么设置所有图片一排横着滚动

网页设计HTML怎么设置所有图片一排横着滚动,第1张

HTML页面图片横向滚播效果:

<html>

<head>

<style>

body{margin:0px}

ul{list-style:noneborder:0padding:0pxmargin:0px}

li{list-style:nonefloat:leftborder:0padding:0pxmargin:0px}

img{border:0px padding:0pxmargin:0px}

</style>

</head>

<body>

<center><div id="div1" style="overflow:hiddencursor:handmargin-top:50px" onmouseover="stop()" onmouseout="ss()">

<ul id="img" style="clear:both"><!--放图片的容器,此容器在div1里滚动-->

<!--以下是要滚动的内容-->

<li><img id="img0" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>

<li><img id="img1" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>

<li><img id="img2" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>

<li><img id="img3" src="http://www.alixixi.com/images/index180.gif" width="100" height="100" style="display:block" /></li>

</ul>

</div>

</center>

<script language="javascript">

var w,h,id,speed,Html

w=400//-------滚动容器的宽度--------//

h=100//-------滚动容器的高度--------//

id="div1"//-------滚动容器的id--------//

direction="left"//-------滚动方向有四个值

因为你用的模板,传的是一个array,每循环一次生成一个DIV,所以要把循环开始<!-- BEGIN nameArr.Name -->放在<div class = "userList">前面,改成这样

========================================

html:

<div class="showUser">

<fieldset>

<legend>俱乐部成员</legend>

<!-- BEGIN nameArr.Name -->

<div class = "userList">

<p> </p>

<p><a href="./index.php?id={uid}">{userName}</a></p>

<!-- IF avatar = "" -->

<p><a href="./index.php?id={uid}" ><img src = "/team5/v0.6/upload/_static/picture/avatar/default.jpg"></a></p>

<!-- ELSE -->

<p><a href="./index.php?id={uid}" ><img src = "/team5/v0.6/upload/_static/picture/avatar/{avatar}"></a></p>

<!-- ENDIF -->

</div>

<!-- END nameArr.Name -->

</fieldset>

<div class="clear"></div>

</div>

==========================================

css:

.showUser{

width:780px

padding:10px

}

.showUser legend {

margin-bottom:20px

font-size:200%

}

.userList{

margin-bottom:5px

word-break:break-all

word-wrap:break-word

float:left

}

.userList img {

margin:5px 19.5px

border:4px solid #d7e1ed

display:block

}

.userList a {

margin:5px 19.5px

color:#444

text-decoration:none

}

.userList a:hover {

color:#888

text-decoration:none

}

===========================================

function getName()

{

global $DB,$mysql_prefix

$nameArr = array()

$con = mysql_connect("localhost", "root", "admin")

if (!$con)

{

die('Could not connect: ' . mysql_error())

}

$db_selected = mysql_select_db("micblog",$con)

$sql = "SELECT `UID`, `AVATAR`, `USERNAME` FROM `WEIQU_USERINFO`"

$result = mysql_query($sql,$con)

while($Re = mysql_fetch_array($result))

{

$nameArr[] = array(

"uid"=>strip_tags($Re['UID']),

"userName" =>strip_tags($Re['USERNAME']),

"avatar" =>strip_tags($Re['AVATAR']),

)

}

$return['Name'] = $nameArr

return $return

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7316211.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存