怎样使网页里的图片向上滚动改为向左滚动?
发布网友
发布时间：2022-05-14 23:12
共2个回答
热心网友
时间：2023-08-05 00:43
<table width="90%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="12%" height="126" align="right">企业图片：</td>
<td width="88%" align="left"><table width="121" height="126" border="0" cellpadding="0" cellspacing="0"><tr><td>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 600px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
==================================================================
下面是把左滚动变成上下滚动
<div id="demo"
style="width:100px;height=100px;overflow:hidden;background:#DDD">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 600px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif"
border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif"
border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif"
border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif"
border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif"
border="0" /></a>
</div>
<div id="demo2"></div> </div>
</html>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=20; //滚动速度值，值越大速度越慢
demo2.innerHTML = demo1.innerHTML //克隆demo2为demo1
function Marquee(){
if(demo2.offsetWidth-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar = setInterval(Marquee,speed); //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)} //鼠标经过时清除定时器
达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)} //鼠标移
开时重设定时器
-->
</script>
热心网友
时间：2023-08-05 00:43
if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
把这段代码改下
function Marquee(){
if(demo2.offsetLeft-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
你试试，我没测试，是按你的代码改的，思路也就是把top改成left，height改成width
