js实现无缝滚动特效

本文实例为大家介绍了js实现无缝滚动特效需要做到的功能，以及关键性js代码，分享给大家供大家参考，具体内容如下

运行效果图：

查看图片

结合下学了的知识，做个模拟的综合性扩展练习~~ 大致功能如下：

1、点开html后，图片自动移动展示 2、点击左右方向，可以改变图片移动的方向(改变left的值，正负) 3、鼠标移入移出图片后，图片暂停移动(setInterval,clearInterval) 4、鼠标移到图片上，高亮（a:hover） 5、点击小图，下面的大图会改变 6、文字区域随着图片的变化而变化（未成功，有待提高）

具体代码：

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实现无缝滚动还是正常实现了，希望对大家也能有所帮助。

js代码实现点击按钮出现60秒倒计时
比如，一些网站上的手机短信认证的功能，有类似实现点击按钮后，倒计时60秒才能再次点击发送的效果。此例子用Javascript实现点击按钮后，倒计时60秒

js倒计时抢购实例
本文实例为大家分享了JavaScript实现限时抢购，供大家参考，具体代码如下运行效果图：具体代码如下：!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://w

JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
HTML5中的fullscreen，目前可以在除IE和opera外的浏览器中使用，有的时候用来做全屏API，游戏呀，等都很有用。先看常见的APIelement.requestFullScreen()作用：请