打印

( 讨论交流 ) 无间断滚动，今天写，希望和大家多多交流~~~

本主题由 System 于 2008-7-12 05:00 解除限时高亮

huaronggg [楼主]

新手上路

帖子: 14
体力: 36
威望: 0
离线: 98 天

1^# 大中小发表于 2008-6-26 23:19

<html>
<head>
<style>
body{margin:0px;}
ul{list-style:none; border:0; padding:0px; margin:0px;}
li{list-style:none; float:left; border:0; padding:0px; margin:0px;}
img{border:0px;  padding:0px; margin:0px;}
</style>
</head>
<body>
<center><div id="div1" style="overflow:hidden; cursor:hand; margin-top:50px;" onmouseover="stop()" onmouseout="ss()">
           <ul id="img" style="clear:both;">
		      
	             <li><img id="img0" src="http://i0.sinaimg.cn/ty/up/2008-06-27/U1614P6T64D48374F1322DT20080627091213.jpg" width="100" height="100" style="display:block;" /></li>
				 <li><img id="img1" src="http://i3.sinaimg.cn/ty/up/2008-06-23/U1614P6T64D48179F1091DT20080623091748.jpg" width="100" height="100" style="display:block;" /></li>
				 <li><img id="img2" src="http://www.baidu.com/img/logo-yy.gif" width="100" height="100" style="display:block;" /></li>
				 <li><img id="img3" src="http://i2.sinaimg.cn/ty/up/2008-06-23/U1614P6T64D48179F1324DT20080623091748.jpg" 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";//-------滚动方向有四个值left，right，up，down，自己试试--------//
speed="100";//-------滚动速度100相当于1秒，越小越快--------//
imgDiv="img";//-------放图片的容器id--------//
HtmlL=document.getElementById(imgDiv).innerHTML;
HtmlT=document.getElementById(id).innerHTML;
switch (direction)
{
case "left":
     document.getElementById(imgDiv).innerHTML=HtmlL+HtmlL;
	 break;
case "right":
     document.getElementById(imgDiv).innerHTML=HtmlL+HtmlL;
	 break;
case "up":
     document.getElementById(id).innerHTML=HtmlT+HtmlT;
	 break;
case "down":
     document.getElementById(id).innerHTML=HtmlT+HtmlT;
	 break;
}
function ss(){
document.getElementById(id).style.width=w+5;
document.getElementById(id).style.height=h;
document.getElementById(imgDiv).style.width=(w+5)*2;
document.getElementById(imgDiv).style.height=h;
var ele
ele=document.getElementById("div1");
switch (direction)
{
case "left":
ele.scrollLeft=ele.scrollLeft+5;
if (ele.scrollLeft>=w+5)
{
ele.scrollLeft=0;
}
break;
case "right":
ele.scrollLeft=ele.scrollLeft-5;
if (ele.scrollLeft<=0)
{
ele.scrollLeft=w+5;
}
break;
case "up":
ele.scrollTop=ele.scrollTop+5;
if (ele.scrollTop>=h)
{
ele.scrollTop=0;
}
break;
case "down":
ele.scrollTop=ele.scrollTop-5;
if (ele.scrollTop<=0)
{
ele.scrollTop=h;
}
break;
}
t=setTimeout("ss()",speed);
}
function stop(){
document.getElementById("div1").scrollLeft=document.getElementById("div1").scrollLeft;
document.getElementById("div1").scrollTop=document.getElementById("div1").scrollTop;
     clearTimeout(t);
}
setTimeout("ss()",100);
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 caiying2007 于 2008-6-27 20:42 编辑 ]

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

shaohua162001

荷西

高级会员

帖子: 1136
体力: 754
威望: 1
当前: 北京海淀区
离线: 1 天

专长 UI,前端制作

2^# 大中小发表于 2008-6-27 08:05

支持共享

TOP

美橙vps独立IP月付189元

goodlucklq

深蓝蝴蝶

高级会员

帖子: 449
体力: 887
威望: 2
当前: 山东青岛
离线: 38 天

专长 JS,.NET,MSSQL

3^# 大中小发表于 2008-6-27 08:53

http://bbs.blueidea.com/thread-2866368-1-1.html

大巧不工大象无形
╭(︶_︶≠)╮

TOP

中央美院远程平面设计进修班

huayidishou

花衣笛手

中级会员

帖子: 137
体力: 319
威望: 0
当前: 天津南开

4^# 大中小发表于 2008-6-27 09:11

谢谢楼主了。。

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

huayidishou

花衣笛手

中级会员

帖子: 137
体力: 319
威望: 0
当前: 天津南开

5^# 大中小发表于 2008-6-27 09:16

谢谢楼主了。。
不过怎么改才可以得到不间断的横向图片滚动呢？？

TOP

wend1234

暗夜灰眸

中级会员

帖子: 166
体力: 299
威望: 0
当前: 北京朝阳区
离线: 3 天

专长 网页设计,前端制作,SEO

6^# 大中小发表于 2008-6-27 09:21

收藏了谢谢

来打酱油的

TOP

huaronggg [楼主]

新手上路

帖子: 14
体力: 36
威望: 0
离线: 98 天

7^# 大中小发表于 2008-6-27 12:09

回复 huayidishou 在 4# 的帖子

改变directiont的值，有四个放向

TOP

kyukoi

初级会员

帖子: 45
体力: 59
威望: 0
离线: 35 天

专长 JS,JAVA,Oracle

8^# 大中小发表于 2008-6-27 13:29

还是有间断````

TOP

huayidishou

花衣笛手

中级会员

帖子: 137
体力: 319
威望: 0
当前: 天津南开

9^# 大中小发表于 2008-6-27 13:32

回复 huaronggg 在 7# 的帖子

我下载了试了一下
好像有间断的，也就是说当图片滚动完一轮后会出现空白，然后突然间又开始滚动的呀

TOP

huaronggg [楼主]

新手上路

帖子: 14
体力: 36
威望: 0
离线: 98 天

10^# 大中小发表于 2008-6-27 15:42

回复 kyukoi 在 8# 的帖子

改宽度w的值,w的值要等于你要滚动的内容的宽度

TOP

huaronggg [楼主]

新手上路

帖子: 14
体力: 36
威望: 0
离线: 98 天

11^# 大中小发表于 2008-6-27 15:56

回复 huayidishou 在 9# 的帖子

我知道什么原因了，你微调一下宽度w的值要等于你要滚动的内容的宽度，或大一点

TOP

huayidishou

花衣笛手

中级会员

帖子: 137
体力: 319
威望: 0
当前: 天津南开

12^# 大中小发表于 2008-6-27 16:07

回复 huaronggg 在 11# 的帖子

宽度改了之后，还是有间隙的
比如我有5个图片，在第5个图后面出现的应该是第1个图，可我没有看到呀。。。

TOP

huaronggg [楼主]

新手上路

帖子: 14
体力: 36
威望: 0
离线: 98 天

13^# 大中小发表于 2008-6-27 16:35

回复 huayidishou 在 12# 的帖子

因为那张图被挤到下一行了，你把宽度稍设大一点，大概5个像素这样
谢谢提出问题交流～我也不知道为什么会差这么一点，原因正在
寻找中。。。。。比如滚动内容总宽是400，你设成405这样

[ 本帖最后由 huaronggg 于 2008-6-27 16:39 编辑 ]

TOP

huaronggg [楼主]

新手上路

帖子: 14
体力: 36
威望: 0
离线: 98 天

14^# 大中小发表于 2008-6-27 16:52

回复 huayidishou 在 12# 的帖子

我改了一下，你再试试看

TOP

( 讨论 交流 ) 无间断滚动，今天写，希望和大家多多交流~~~

回复 huayidishou 在 4# 的帖子

回复 huaronggg 在 7# 的帖子

回复 kyukoi 在 8# 的帖子

回复 huayidishou 在 9# 的帖子

回复 huaronggg 在 11# 的帖子

回复 huayidishou 在 12# 的帖子

回复 huayidishou 在 12# 的帖子

( 讨论交流 ) 无间断滚动，今天写，希望和大家多多交流~~~