图片轮播自改版（跑马灯效果）

最新推荐文章于 2024-03-29 11:41:27 发布

Mang_liu

最新推荐文章于 2024-03-29 11:41:27 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： scroll 2010 class timer function javascript

本文链接：https://blog.csdn.net/Mang_liu/article/details/7814476

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<div id="elem">
<div style="width:9999px;">
<ul id="elem1">
<li><a href="#" onClick="return false;"><img height="85" width="100" src="/upload/images/20104/2010421132223904516.jpg" /></a><span class="shop_name"><a href="#" onClick="return false;">木马-软绳木琴12659</a></span></li>
<li><a href="#" onClick="return false;"><img height="85" width="100" src="/upload/images/20104/2010421132444066449.jpg" /></a><span class="shop_name"><a href="#" onClick="return false;">木马-大穿衣拼图11129</a></span></li>
<li><a href="#" onClick="return false;"><img height="85" width="100" src="/upload/images/20104/2010421132593282755.jpg" /></a><span class="shop_name"><a href="#" onClick="return false;">木马-42块功能积木车26019</a></span></li>
<li><a href="#" onClick="return false;"><img height="85" width="100" src="/upload/images/20104/2010421133134847282.jpg" /></a><span class="shop_name"><a href="#" onClick="return false;">木马-工具椅14148</a></span></li>
<li><a href="#" onClick="return false;"><img height="85" width="100" src="/upload/images/20104/2010421133267348636.jpg" /></a><span class="shop_name"><a href="#" onClick="return false;">青蛙串珠架</a></span></li>
</ul> 
 <ul id="elem2"></ul>
 </div>   
 </div>   
<script language="javascript" type="text/javascript">
 window.onload = function(){
 var timer;
var elem = document.getElementById('elem');
var elem1 = document.getElementById('elem1');
var elem2 = document.getElementById('elem2');
if(elem1.offsetWidth>=elem.offsetWidth){
elem2.innerHTML = elem1.innerHTML;
function Scroll(){
if(elem.scrollLeft>=elem1.offsetWidth){
 elem.scrollLeft -= elem1.offsetWidth;
}else{
elem.scrollLeft += 1;
}
}
timer = setInterval(Scroll,20);
elem.onmouseover = function(){
clearInterval(timer);
}
elem.onmouseout = function(){
timer = setInterval(Scroll,20);
}
}
}
</script>