Home > Article > Web Front-end > Native javascript achieves seamless picture scrolling effect_javascript skills

Native javascript achieves seamless picture scrolling effect_javascript skills

WBOYOriginal: 2016-05-16 15:15:481022browse

The horizontal seamless scrolling effect of pictures is used on a large number of websites, especially when some corporate websites display products. Because it is a dynamic effect, it can add a lot of color to the website and attract users more than static picture display. Attention, let’s introduce how to achieve this effect through example code.
The code is as follows:

<html>
<head>
<meta charset="gb2312">
<title>脚本之家</title>
<style type="text/css"> 
#demo{ 
 background:#FFF; 
 overflow:hidden; 
 border:1px dashed #CCC; 
 width:500px; 
} 
#indemo{
 float:left;
 width:2000px;
} 
#indemo a{
 width:100px;
 height:100px;
 float:left;
 background-color:blue;
 margin-left:5px;
 text-align:center;
 line-height:100px;
 color:red;
 text-decoration:none;
}
#demo1{float:left;} 
#demo2{float:left;} 
</style>
<script type="text/javascript"> 
window.onload=function(){
 var speed=10; 
 var tab=document.getElementById("demo"); 
 var tab1=document.getElementById("demo1"); 
 var tab2=document.getElementById("demo2"); 
 tab2.innerHTML=tab1.innerHTML; 
 function Marquee(){ 
 if(tab2.offsetWidth-tab.scrollLeft<=0){
  tab.scrollLeft-=tab1.offsetWidth 
 } 
 else{ 
  tab.scrollLeft++; 
 } 
 } 
 var MyMar=setInterval(Marquee,speed); 
 tab.onmouseover=function() {clearInterval(MyMar)}; 
 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 
} 
</script>
</head>
<body>
<div id="demo">
 <div id="indemo">
 <div id="demo1"> 
  <a href="#">脚本之家一</a> 
  <a href="#">脚本之家二</a> 
  <a href="#">脚本之家三</a> 
  <a href="#">脚本之家四</a> 
  <a href="#">脚本之家五</a> 
  <a href="#">脚本之家六</a> 
 </div>
 <div id="demo2"></div>
 </div>

I hope it will be helpful for everyone to learn javascript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Briefly understand the source code of the Model model and View of Backbone.js_Basic knowledgeNext article：Briefly understand the source code of the Model model and View of Backbone.js_Basic knowledge

See more

Native javascript achieves seamless picture scrolling effect_javascript skills

Related articles