javascript 书写无缝滚动。

废话少说，献上demo 源码大家自己下载看效果。

先放上html代码：

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
	  <title>无缝滚动</title>
    <link rel="stylesheet" href="static/css/aio.css" />
</head>
	<body>
    <h1>无缝滚动</h1>
    <div class="btn l-btn" id="l-btn"><</div>
    <div class="btn r-btn" id="r-btn">></div>
    <div class="banner" id="banner">
      <ul class="move" id="move">
        <li><a href="#"><img src="static/images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="static/images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="static/images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="static/images/4.jpg" alt=""></a></li>
      </ul>
    </div>	
  <script type="text/javascript" src="static/js/test.js"></script>
</body>
</html>

接下来就是css文件对页面的格式进行了简单的布局。

/*!/css/demo.scss*/
body{
  text-align: center;
  background-color: #FFCCFF;
}
.banner {
  position: relative;
  margin: 50px auto 0;
  width: 800px;
  height: 120px;
  border: 2px solid #fff;
  overflow: hidden;
}

.banner .move {
  position: absolute;
}

.banner ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 0;
}

.banner ul li {
  display: inline-block;
}

.btn {
  margin-top: 40px;
  width: 30px;
  height: 100px;
  background-color: rgba(255, 255, 255, .3);
  line-height: 100px;
  text-align: center;
  font-size: 60px;
  font-weight: bold;
  cursor: pointer;
}

.l-btn {
  float: left;
}

.r-btn {
  float: right;
}

接下就是原生的js代码

window.onload =function() {
	var oDiv = document.getElementById('banner');
	var oUl = oDiv.getElementsByTagName('ul')[0];
	var oLi = oUl.getElementsByTagName('li');

	var speed = -2;

	oUl.innerHTML+=oUl.innerHTML;
	oUl.style.width = oLi[0].offsetWidth*oLi.length+'px';

	function move(){
		oUl.style.left = oUl.offsetLeft +speed +"px";
		if(oUl.offsetLeft < -oUl.offsetWidth/2){     //宽度没有负值，但是offsetLeft有，所以（-）不能忘记
			oUl.style.left = 0;
		}
		if(oUl.offsetLeft > 0){
			oUl.style.left = -oUl.offsetWidth/2 + 'px';
		}
	}
	var time = setInterval(move,30);
	
	//鼠标放上去和移出的暂停效果
	oDiv.onmouseover = function(){
		clearInterval(time);
	}
	oDiv.onmouseout = function(){
		time = setInterval(move,30);
	}



	var lBtn =document.getElementById('l-btn');
	var rBtn =document.getElementById('r-btn');

	// 左右控制的效果
	lBtn.onclick = function(argument) {
		speed = -2;
	}
	rBtn.onclick =function(){
		speed = 2;
	}
}

一，首先获取到元素节点。

二，我们先申请一个speed变量，因为到后面我们可以用它来控制速度和滚动的方向。

三，动态多创建一份li元素，这里不好解释，大家可以注释之后看代码。就能明白它的意义了。

四，为了能让oUl的宽度装下所有的oLi,所以用一个oLi的宽度去乘以oLi的length.加上px就可以了（ps:一定要加‘px’,除非宽度是0.因为style.width是个string类型）

五，在move函数里面，主要就是对位置的判断了。大家可以自己去琢磨一下。（代码无缝滚动效果的原理是：改变了div 的left值。）

我自己在写的时候，总是搞不清element.style.left 和element.offsetLeft。如果你也是一样，请戳这里！

沈志勇说

发布了47 篇原创文章 · 获赞 61 · 访问量 13万+

私信关注

javascript 书写无缝滚动。

猜你喜欢