Home > Article > Web Front-end > Horizontal uninterrupted scrolling effect code
Complete DIV+CSS+JS uninterrupted horizontal scrolling code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>横向不间断滚动DIV</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="//m.sbmmt.com/">DIV</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="//m.sbmmt.com/"><img src="//m.sbmmt.com/img/css-logo.gif" /></a></li>
<li><a href="//m.sbmmt.com/"><img src="//m.sbmmt.com/img/css-logo.gif" /></a></li>
<li><a href="//m.sbmmt.com/"><img src="//m.sbmmt.com/img/css-logo.gif" alt="div css" /></a></li>
<li><a href="//m.sbmmt.com/"><img src="//m.sbmmt.com/img/css-logo.gif" /></a></li>
<li><a href="//m.sbmmt.com/"><img src="//m.sbmmt.com/img/css-logo.gif" alt="divcss" /></a></li>
<li><a href="//m.sbmmt.com/"><img src="//m.sbmmt.com/img/css-logo.gif" /></a></li>
<li><a href="//m.sbmmt.com/"><img src="//m.sbmmt.com/img/css-logo.gif" /></a></li>
<li><a href="http://wwwphp.cn/"><img src="//m.sbmmt.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>I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Answers to questions about camel case naming and JS
Summary of the front-end js framework and explanation of its uses
The above is the detailed content of Horizontal uninterrupted scrolling effect code. For more information, please follow other related articles on the PHP Chinese website!