问一下，图片上滚带停顿

SFatpaper 2009-12-30 02:57:29

此段代码有问题，请问如何修改。我想要的效果是一行5张图片，一行一行上滚带停顿。

<style type="text/css">
.Changes12_30{border:1px solid #CBCBCB}
#IssueList {padding:0;list-style:none;height:74px;width:984px;overflow:hidden}
#IssueList ul{width:980px;padding:10px 0 10px 0}
#IssueList ul li{width:196px;float:left;text-align:center}
</style>

<div class="Changes12_30">
<div id="IssueList">
<ul>
<li><img height="60" width="150" alt="1" src="adfile/image/scrollad1.gif" /></li>
<li><img height="60" width="150" alt="2" src="adfile/image/scrollad2.gif" /></li>
<li><img height="60" width="150" alt="3" src="adfile/image/scrollad3.gif" /></li>
<li><img height="60" width="150" alt="4" src="adfile/image/scrollad4.gif" /></li>
<li><img height="60" width="150" alt="4" src="adfile/image/scrollad5.gif" /></li>
</ul>
<ul>
<li><img height="60" width="150" alt="1" src="adfile/image/scrollad1.gif" /></li>
<li><img height="60" width="150" alt="2" src="adfile/image/scrollad2.gif" /></li>
<li><img height="60" width="150" alt="3" src="adfile/image/scrollad3.gif" /></li>
<li><img height="60" width="150" alt="4" src="adfile/image/scrollad4.gif" /></li>
<li><img height="60" width="150" alt="4" src="adfile/image/scrollad5.gif" /></li>
</ul>
</div>
</div>

<script type="text/javascript">
(function(ul, delay, speed, lineHeight) {
var slideBox = (typeof ul == 'string')?document.getElementById(ul):ul;
var delay = delay||1000;
var speed=speed||15;
var lineHeight = lineHeight||60;
var tid = null, pause = false;
var start = function() {
tid=setInterval(slide, speed);
}
var slide = function() {
if (pause) return;
slideBox.scrollTop += 2;
if (slideBox.scrollTop % lineHeight == 0) {
clearInterval(tid);
slideBox.appendChild(slideBox.getElementsByTagName('li')[0]);
slideBox.scrollTop = 0;
setTimeout(start, delay);
}
}
slideBox.onmouseover=function(){pause=true;}
slideBox.onmouseout=function(){pause=false;}
setTimeout(start, 2000);
})('IssueList', 3000, 2, 58);//停留时间，相对速度（越小越快）,每次滚动多少，最好和Li的Line-height一致。
</script>

...全文

128 3 打赏收藏举报

写回复

3 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

浪尖赏花 2009-12-30

打赏
举报

<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>test</title> 



<style type="text/css"> 

.Changes12_30{border:1px solid #CBCBCB} 

#IssueList {padding:0;list-style:none;height:74px;width:984px;overflow:hidden} 

#IssueList ul{width:980px;padding:10px 0 10px 0} 

#IssueList ul li{width:196px;float:left;text-align:center} 

</style> 





</head>



<body> 

</p>

<div class="Changes12_30"> 

<div id="IssueList"> 

<ul> 

<li> <img height="60" width="150"  alt="11" src="adfile/image/scrollad1.gif" /> </li> 

<li> <img height="60" width="150"  alt="12" src="adfile/image/scrollad2.gif" /> </li> 

<li> <img height="60" width="150"  alt="13" src="adfile/image/scrollad3.gif" /> </li> 

<li> <img height="60" width="150"  alt="14" src="adfile/image/scrollad4.gif" /> </li> 

<li> <img height="60" width="150"  alt="15" src="adfile/image/scrollad5.gif" /> </li> 

</ul> 

<ul> 

<li> <img height="60" width="150"  alt="21" src="adfile/image/scrollad1.gif" /> </li> 

<li> <img height="60" width="150"  alt="22" src="adfile/image/scrollad2.gif" /> </li> 

<li> <img height="60" width="150"  alt="23" src="adfile/image/scrollad3.gif" /> </li> 

<li> <img height="60" width="150"  alt="24" src="adfile/image/scrollad4.gif" /> </li> 

<li> <img height="60" width="150"  alt="25" src="adfile/image/scrollad5.gif" /> </li> 

</ul> 

</div> 

</div> 

<script type="text/javascript"> 

(function(ul, delay, speed, lineHeight) { 

var slideBox = (typeof ul == 'string')?document.getElementById(ul):ul; 

var delay = delay||1000; 

var speed=speed||15; 

var lineHeight = lineHeight||60; 

    var tid = null, pause = false; 

    var start = function() { 

    tid=setInterval(slide, speed); 

    } 

    var slide = function() { 

    if (pause) return; 

    slideBox.scrollTop += 2; 

    if (slideBox.scrollTop>0&&slideBox.scrollTop%100 == 0) { 

        clearInterval(tid); 

        slideBox.appendChild(slideBox.getElementsByTagName('ul')[0]); 

        slideBox.scrollTop = 0; 

        setTimeout(start, delay); 

        } 

    } 

    

    slideBox.onmouseover=function(){pause=true;} 

    slideBox.onmouseout=function(){pause=false;} 

    setTimeout(start, 2000); 

})('IssueList', 3000, 2, 58);//停留时间，相对速度（越小越快）,每次滚动多少，最好和Li的Line-height一致。 



</script>

</body>

</html>

happy664618843 2009-12-30

打赏
举报

onmouseout=window.clearInterval(iD)
onmouseover=window.setInterval()

Inpool 2009-12-30

打赏
举报

具体代码我就不写了，你的代码我也没看，不过你应该自己会写就是了。

setInterval(function(){

  //这里写上使页面滚动一个line-height的代码。

},2000);//这里2000改成你需要的数值。应该是(需停顿时间+滚动消耗的时间)

相关推荐

图片滚动一屏，停顿再滚动，也可设置鼠标指向停顿，拿开鼠标继续滚动

因工作需要做一个图片向上滚停滚效果，因此用jquery实现了这一功能，个人觉得代码很简洁，希望给需要的朋友们一些参考。前台html代码如下（css样式表文件我就不粘贴了，因为我觉得那个一般人都会）： <div class="picshow"> <ul> <asp:Repeater ID="Picshowrp" runa...

最近有个需求要做旋转进度条的效果，美术提供了图片，用ImageView使用旋转动画发现有个问题，就是每圈旋转结束后会停顿一下，网上查资料说是因为默认的动画差值器会先加速后减速导致了停顿，使用LinearInterpolator 这个差值器就可以做到匀速转动。试了一下确实没有了加速减速的问题了，但每圈结束依然有停顿，确实比之前停顿时间短了不少，但肉眼依然可清楚的看到停顿，这样是不行的。最后...

主要介绍了js实现按钮控制带有停顿效果的图片滚动，，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

固定头部： hongyangAndroid/Android-StickyNavLayout；ListView 与ViewPager 滑动冲突处理，滑动到顶部固定位置停顿; ufo22940268/Android-GoogleIoView；模仿2014 google io写的一个parallax view ，下拉缩放，上滚固定头部; emmano/BlurSti...

发帖

JavaScript

8.7w+

社区成员

22.4w+

社区内容

Web 开发 JavaScript

社区管理员

加入社区

帖子事件

创建了帖子

2009-12-30 02:57

社区公告

暂无公告