DIV+CSS+JS不间断横向滚动实现代码

时间：2021-10-18 10:05:31|栏目：JavaScript代码|点击：次

DIV+CSS+JS实现不间断横向滚动代码

 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 
<title>横向不间断滚动DIV CSS代码-DIVCSS5</title> 
 
</head> 
 
<body> 
 
<style> 
 
.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} 
 
.scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; } 
 
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */ 
 
</style> 
 
<script language="javascript"> 
 
function ScrollImgLeft(){ 
 
var speed=20 
 
var scroll_begin = document.getElementById("scroll_begin"); 
 
var scroll_end = document.getElementById("scroll_end"); 
 
var scroll_div = document.getElementById("scroll_div"); 
 
scroll_end.innerHTML=scroll_begin.innerHTML 
 
function Marquee(){ 
 
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
 
scroll_div.scrollLeft-=scroll_begin.offsetWidth 
 
else 
 
scroll_div.scrollLeft++ 
 
} 
 
var MyMar=setInterval(Marquee,speed) 
 
scroll_div.onmouseover=function() {clearInterval(MyMar)} 
 
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
 
} 
 
</script> 
 
<h2 align="center"><a href="http://www.divcss5.com/">DIVCSS5</a>演示说明：向左滚动</h2> 
 
<div style="text-align:center"> 
 
<div class="sqBorder"> 
 
<!--#####滚动区域#####--> 
 
<div id="scroll_div" class="scroll_div"> 
 
<div id="scroll_begin"> 
 
<ul> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="div css" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="CSS" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss5" /></a></li> 
 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
 
</ul> 
 
</div> 
 
<div id="scroll_end"></div> 
 
</div> 
 
<!--#####滚动区域#####--> 
 
</div> 
 
<script type="text/javascript">ScrollImgLeft();</script> 
 
</div> 
 
<!--//向左滚动代码结束--> 
 
</body></html>

上一篇：基于JavaScript实现自定义滚动条

栏目：JavaScript代码

下一篇：兼容FireFox 用javascript写的一个画图函数

本文标题：DIV+CSS+JS不间断横向滚动实现代码

本文地址：http://www.codeinn.net/misctech/180362.html

更多JavaScript代码

JavaScript代码

DIV+CSS+JS不间断横向滚动实现代码

阅读排行

推荐教程