JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。
一：html部分
<body>
<input id="btn1" type="button" value="向左">
<input id="btn2" type="button" value="向右">
<div id="div1">/*外框，显示区域*/ <ul id="ul1">/*循环滚动的内容,下面js控制赋值一份相同的内容*/
<li>111111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</div>
</body>
二：样式表内容
<style>
*{
margin:;
padding:;
}
#div1{
width: 640px;
height: 120px;
margin: 100px auto;
background-color: #646464;
position: relative;
overflow: hidden;
}
#div1 ul{
position:absolute;
left:;
top:;
overflow: hidden;
background-color: #3b7796;
} #div1 ul li{
float: left;
width: 160px;
height: 120px;
list-style: none;
}
</style>
三：js部分
*定义一个速度变量speed，贯穿整个滚动过程
*把html中的滚动部分，复制一份。相当于两份一样的滚动内容
*move()方法，通过判断滚动的位置，当第一份内容的最后一副图滚动完成，就让其回复初始位置。
<script>
window.onload = function(){
/*1.定义滚动的内容、定义速度变量speed、定义滑动部分的宽度=图片数量*图片宽度*/
var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2）
var oLi= document.getElementsByTagName('li');
oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下
var speed = 2;//初始化速度 /*2.给左右按钮加点击事件*/
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2'); var timer = setInterval(move,30);//全局变量 ，保存返回的定时器 oBtn1.addEventListener('click',function(){
speed = -2;
},false);
oBtn2.addEventListener('click',function(){
speed = 2;
},false); /*3.给鼠标加划入划出事件*/
oDiv.addEventListener('mouseout', function () {
timer = setInterval(move,30);
},false);
oDiv.addEventListener('mouseover', function () {
clearInterval(timer);//鼠标移入清除定时器
},false); /* 定义移动的move()方法*/
function move(){
if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
oUl.style.left = 0;
} if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
oUl.style.left = -(oUl.offsetWidth/2)+'px';
} oUl.style.left = oUl.offsetLeft + speed + 'px';
} } </script>
JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。的更多相关文章
- 图片滚动js 实现图片无缝滚动
在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...
- 用JS写的无缝滚动特效
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)
最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 应用JavaScript搭建一个简易页面图片无缝滚动效果
页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
随机推荐
- sublime text3中成功使用bootstrap3
在视图这里卡了挺久的,一直是自己在研究.其实自己有一个坏毛病,遇到问题,在网上搜集下找不到便寻求帮助(大多数是求助无效果,因为自己也没搞懂), 这时候自己就会懈怠一会,然后隔一两天心血起伏后便又继续干 ...
- poj 3169&hdu3592(差分约束)
Layout Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9687 Accepted: 4647 Descriptio ...
- Loj #6287 诗歌
link: https://loj.ac/problem/6287 一开始差点写FFT了23333,并且FFT还能算这样的三元组的数量而且还不用要求这是一个排列.... 但这太大材小用了(而且很可能被 ...
- 非常有用的开发工具之Android Studio插件
我们都知道Eclipse开发Android将在今年年底google不再继续提供相应的开发支持,转而开始强烈发展Android Studio,现在我就分享几款能帮助团队提升工作效率的几个Android ...
- 【lombok】lombok---帮你简化生成必要但臃肿的java代码工具 【映射注解和lombok注解同时使用 以及 映射注解放在属性和get方法上的区别】
官方地址:https://projectlombok.org/ GitHub:https://github.com/rzwitserloot/lombok 指导说明文档:http://jnb.ociw ...
- 利用mvn/maven如何检查依赖冲突，并解决依赖冲突
mvn/maven如何检查依赖冲突,并解决依赖冲突 如图,点击图示位置,就可以把整个项目的依赖关系展示出来 在图里选中一个artifact,则所有依赖该artifact的地方都会一起连带出来突出显示, ...
- 一种全新的自动调用ajax方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 2016.3.23 集成新版activiti-modeler（5.17+）到项目中
书:<activiti实战> 博客: http://www.kafeitu.me/activiti/2013/03/10/integrate-activiti-modeler.html h ...
- 【dubbo】服务提供者运行的三种方式
[dubbo]服务提供者运行的三种方式 学习了:https://blog.csdn.net/yxwb1253587469/article/details/78712451 1,使用容器: 2,使用自建 ...
- JavaScript中给二维数组动态添加元素的质朴方法
var myData = new Array(); for(var i=0;i<tableDatas.length;i++){ var arr=tableDatas[i]; ...... /// ...