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值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
随机推荐
- LeetCode OJ--Palindrome Partitioning **
https://oj.leetcode.com/problems/palindrome-partitioning/ 给定一个字符串 s,求所有的子串组合,每个子串都是回文的. 比如,aba: {a,b ...
- windows下安装oracle，sqlplus连接启动oracle（oracle 主机字符串输入是什么）
1.oracle安装 参考http://wenku.baidu.com/view/d01ffd43336c1eb91a375d68.html,这里不再赘述 2.命令行sqlplus连接oracle ...
- AC日记——【模板】KMP字符串匹配 洛谷 3375
题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来还要输出子串的前缀数组next.如果你不知道这是什么意思也不要问,去百度搜[ ...
- 配置之MySQL5Dialect
报错: org.hibernate.service.spi.ServiceException: Unable to create requested service [org.hibernate.en ...
- 51nod 1105 第K大的数 【双重二分/二分套二分/两数组任意乘积后第K大数】
1105 第K大的数 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 数组A和数组B,里面都有n个整数.数组C共有n^2个整数,分别是A[0] * ...
- JSP-Servlet-SpringMVC
作者:码思客链接:https://zhuanlan.zhihu.com/p/37612412来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 本篇文章,我们来讲讲技术,系 ...
- 代码Rework中的反思
以前编码只是关注能写出来,并让程序运行就完事,这是非常错误的想法. 让我们重新思考软件设计中的一些问题吧! 软件设计就像设计房屋,设计器具,是一个道理.软件的复杂度和bug完全是自己造成的,要设计好的 ...
- mysql日常运维与参数调优
日常运维 DBA运维工作 日常 导数据,数据修改,表结构变更 加权限,问题处理 其它 数据库选型部署,设计,监控,备份,优化等 日常运维工作: 导数据及注意事项 数据修改及注意事项 表结构变更及注意事 ...
- vim批量缩进功能
注释符号:" :set tabstop=4 设定tab宽度为4个字符 :set shiftwidth=4 设定自动缩进为4个字符 :set expandtab 用space替代tab的输入 ...
- htop简介
htop可谓top的升级版,top不可以鼠标操作,但是htop可以使用鼠标操作 启动方式:命令行下输入htop直接启动,启动后的界面如图所示 操作:可以使用上下左右方向键进行移动查看.可以使用鼠标点击 ...