如何在同一个页面里放置多个这样的图片轮播代码？（现在只有最上面的有轮播效果）

Posted 2023-05-12

<style type="text/css">
*
margin:0px;
padding:0px;

body
margin:10px;

.box
width:276px;
height:200px;
border:solid 1px #CCC;
padding:2px;

.box .box1
width:276px;
height:200px;
position:relative;
overflow:hidden;

.box .box1 .picbox
width:276px;
height:200px;
position:relative;
display:none;

.box .box1 .picbox .shadow
width:100%;
height:25px;
position:absolute;
bottom:0px;
left:0px;
background:#666;
opacity:0.5;
filter:alpha(opacity=50);

.box .box1 .picbox .title
width:276px;
height:25px;
line-height:25px;
position:absolute;
bottom:21px;
left:0px;
text-indent:0.5em;
color:#FFF;

.box1 .picbtn
width:155px;
height:25px;
position:absolute;
right:0px;
bottom:-8px;

.box1 .picbtn a
width:25px;
height:12px;
display:block;
float:left;
margin-right:5px;
background:url(images/out.png) no-repeat left top;

.box1 .picbtn a.act
background:url(images/hover.png) no-repeat left top;

</style>
<script type="text/javascript">
window.onload=function()
var oBox=document.getElementById('box');
var oBtn=document.getElementById('btn');
var aBtn=oBtn.getElementsByTagName('a');
//alert(aBtn.length);
var aPicText=getByclass('picbox',oBox);
for(var i=0;i<aBtn.length;i++)
aBtn[i].index=i;
aBtn[i].onmouseover=function()
for(var n=0;n<aBtn.length;n++)
aPicText[n].style.display="none";
aBtn[n].className='';

aPicText[this.index].style.display="block"
this.className='act';


function getByclass(sName,oParent)
var obj=oParent.getElementsByTagName('*');
var result=[];
for(var i=0;i<obj.length;i++)
if(obj[i].className==sName)
result.push(obj[i]);


return result;


</script>
<div class="box" id="box">
<div class="box1">
<?php
$sql = "SELECT * FROM my_news order by dateline desc limit 0,5";
$query = mysql_query($sql) or die(mysql_error());
while($rows = mysql_fetch_array($query))
?>
<div class="picbox" style="display:block;">
<img src="<? echo $rows['imageurl'];?>" width="276" height="200"/>
<div class="shadow"></div>
<p class="title"><? echo $rows['newstitle'];?></p>
</div>
<?

?>
<div class="picbtn" id="btn">
<a href="javascript:void(0)" class="act"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
</div>
</div>
</div>

参考技术A 你这不是难为人么？还带PHP代码的！给你的建议是你先用html，写出来效果。然后用PHP代替换掉标签！而且JS调用是不能使用同一个ID的！如果想添加第二个就得重新写个JS换上新的 ID 参考技术B 我一般有这种情况直接就给ID还有JS里的变量改名。。。比如ID改成btn1、btn2、btn3 这样的。。。

html5 banner图片数量如何在代码里改

参考技术A 根据现有的banner代码复制粘贴吧，一般的都能这样加的，也是最简便的方法了 参考技术B 好的banner一般不需要修改，他们会自己判断图片的数量。 参考技术C 贴图贴代码