本文实例为大家介绍了js实现无缝滚动特效需要做到的功能,以及关键性js代码,分享给大家供大家参考,具体内容如下
运行效果图:
结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下:
具体代码:
window.onload = function(){ //声明部分( 现在的习惯是要写什么声明什么, 一起写容易搞忘了。。也不知道好不好这样) var oDiv = document.getElementById(\'box\'); var oUl = oDiv.getElementsByTagName(\'ul\'); var oLi = oUl.getElementsByTagName(\'li\'); var speed = 2; var timer = null; //让ul的内容增一倍,从而实现无缝滚动 oUl.innerHTML = oUl.innerHTML + oUl.innerHTML; oUl.style.width = oLi[1].offsetWidth * oLi.length + \'px\'; //move函数 function move(){ oUl.style.left = oUl.offsetLeft + speed + \'px\'; //控制左 if(oUl.offsetLeft < -oUl.offsetWidth/2){ oUl.style.left = 0; } //控制右 if(oUl.offsetLeft > 0){ oUl.style.left = -oUl.offsetWidth/2 + \'px\'; } } //图标点击~ 控制移动方向 var oLeft = document.getElementById(\'jt_left\'); var oRight= document.getElementById(\'jt_right\'); oLeft.onclick = function(){ speed = -2; } oRight.onclick = function(){ speed = 2; } //鼠标移入移出效果 oDiv.onmouseover = function(){ clearInterval(timer); } oDiv.onmouseout = function(){ timer = setInterval(move,20); } timer = setInterval(move,20); //点击获取大图 var aA = oDiv.getElementsByTagName(\'a\'); for(var i=0;i<aA.length;i++){ aA[i].onclick = function(){ showPic(this); return false; } } function showPic(whichpic){ var source = whichpic.href; var placeholder = document.getElementById(\'placeholder\'); placeholder.src = source; } }
最后文字的替换效果 ,本想用图片的方式,让文本框对应的数字跟着变~~ 结果未能成功,不知原因,这方面还需待提高,希望大家能提供一些好的建议,不过js实现无缝滚动还是正常实现了,希望对大家也能有所帮助。
本文地址:https://www.stayed.cn/item/15682
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我