js实现无缝滚动特效


Posted in Javascript onDecember 20, 2015

本文实例为大家介绍了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实现无缝滚动还是正常实现了,希望对大家也能有所帮助。

Javascript 相关文章推荐
多个js与css文件的合并方法详细说明
Dec 26 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
a标签调用js的方法总结
Sep 05 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 #Javascript
原生js页面滚动延迟加载图片
Dec 20 #Javascript
javascript实现的网站访问量统计代码
Dec 20 #Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 #Javascript
图解js图片轮播效果
Dec 20 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 #Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 #Javascript
You might like
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php curl_init函数用法
2014/01/31 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
PHP7 标准库修改
2021/03/09 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
利用python开发app实战的方法
2019/07/09 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
检讨书怎么写
2015/01/23 职场文书
消费者投诉书范文
2015/07/02 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL