问一下，图片上滚带停顿

sz861128 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>

...全文

140 3 打赏收藏转发到动态举报

写回复

用AI写文章

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左右滚动效果(带停顿)"是一种常见的网页交互设计，它允许用户通过鼠标悬停或点击来浏览一串水平排列的内容，如图片、文本或者产品展示。这个效果利用了jQuery库的强大功能，使得滚动过程平滑且具有可控制的...

### JS无停顿横向滚动图片特效之带标题：深度解析与实现在现代网页设计中，动态效果的应用能够显著提升用户体验，吸引用户注意力并增强页面的互动性。本篇文章将深入探讨一种基于JavaScript（简称JS）实现的无停顿...

综上所述，“经典向左滚动且停顿代码”是一个典型的早期网页设计案例，通过简单的HTML和JavaScript实现了基本的图片滚动功能。随着技术的发展，现在有更多的方法和技术可以实现类似的效果，但了解这些基础知识对于...

总之，"带停顿的js图片滚动上下"是一种结合了JavaScript DOM操作、定时器和用户交互的设计，旨在提供一种可控制的、视觉上吸引人的图片展示方式。通过理解这些基本原理和技巧，开发者可以创造出各种动态的网页效果，...

JavaScript

87,996

社区成员

224,708

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章