问题的原因在于:
两次定义的函数使用了相同的函数名
function AutoScroll(obj){$(obj).find("ul.slider_1").animate({
marginTop:"-40px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this)
})
}
和
function AutoScroll(obj){$(obj).find("ul.slider_2").animate({
marginTop:"-30px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this)
})
}
函数名相同,所以第二次定义的函数把第一次定义的 “替换掉了”。
解决方法是:使用不同的函数名,命名这两个函数:
<script type="text/javascript">function AutoScroll1(obj){
$(obj).find("ul.slider_1").animate({
marginTop:"-40px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this)
})
}
$(document).ready(function(){
setInterval('AutoScroll1("#slider_1")',5000)
})
function AutoScroll2(obj){
$(obj).find("ul.slider_2").animate({
marginTop:"-30px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this)
})
}
$(document).ready(function(){
setInterval('AutoScroll2("#slider_2")',5000)
})
</script>
简单的写法是:
<script type="text/javascript">function AutoScroll(obj,margintop){
$(obj).find("ul.slider_1,ul.slider_2").animate({
marginTop:margintop
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this)
})
}
$(document).ready(function(){
setInterval('AutoScroll("#slider_1","-40px")',5000)
setInterval('AutoScroll("#slider_2","-30px")',5000)
})
</script>
更简单的写法是把滚动量以自定义属性 marginTopTo 的方式写在标签中:
<div id="slider_1"><ul class="slider_1" marginTopTo="-40px">
<li>...<li>
</ul>
</div>
<div id="slider_2">
<ul class="slider_2" marginTopTo="-30px">
<li>...<li>
</ul>
</div>
然后程序部分这样写:
<script type="text/javascript">function AutoScroll(){
$("ul[marginTopTo]").animate({
marginTop:margintop
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this)
})
}
$(function(){
setInterval(AutoScroll(),5000)
})
</script>
如果有什么不明白的地方,欢迎追问。
js控制滚动条使div在一定区间显示方法步骤。一,新建一个html文件,命名为test.html,用于讲解如何使用JS控制DIV内容的滚动条。
二,在test.html文件内,创建两个div模块,一个div模板包含另一个div模块。
三,在test.html文件内,分别设置两个div模块的id属性为test,ntest。
四,在css中,分别通过id来设置两个div的样式,定义它们的高度、宽度,外部div将overflow属性设置为auto,即超过宽度隐藏,并出现滚动条。注意,内部div的高度、宽度必须比外部div的宽高大,才会出现滚词条。
五,在js中,通过id获得外部div对象,使用scrollTop属性控制垂直滚动条位置为100px,使用scrollLeft属性控制水平滚动条位置为150px。
六,在浏览器打开test.html文件,查看实现的效果。实现在一定区间内显示。
请确认,谢谢。