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值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
随机推荐
- AC日记——[Sdoi2016]数字配对 bzoj 4514
4514 思路: 很受伤现在,,测了那么多次不过的原因就是因为INF不够大: 解法有两种: 解法1: 把n个点按照质因数个数为奇或偶分为两个点集(很容易就可以想到): 然后,按照题目连边跑最大费用流: ...
- HYSBZ 2818 Gcd【欧拉函数/莫比乌斯】
I - Gcd HYSBZ - 2818 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. Input 一个整数N Output 如题 Sample In ...
- 线程和进程（Java）
一.线程概述 线程是程序运行的基本执行单元.当操作系统(不包括单线程的操作系统,如微软早期的DOS)在执行一个程序时,会在系统中建立一个进程,而在这个进程中,必须至少建立一个线程(这个线程被称为主线程 ...
- Zabbix 企业Nginx监控
Zabbix监控Nginx状态 1 修改Nginx配置文件,开启Nginx监控 location /nginx_status { stub_status on; access_log off; all ...
- nodejs session 设计
会话管理 { //保存会话 _data : {}, /** 会话基本操作 ***/ //查找会话 getSession : function(id){}, //创建会话 createSession : ...
- Win7如何自定义鼠标右键菜单 添加在此处打开CMD窗口
将下面文件保存为"右键添加在此处打开CMD窗口.reg"双击导入运行即可 Windows Registry Editor Version 5.00 [HKEY_CLASSES_RO ...
- HDU 1017 A Mathematical Curiosity (枚举水题)
Problem Description Given two integers n and m, count the number of pairs of integers (a,b) such tha ...
- 协程（Coroutine）并不是真正的多线程(转）
自:http://www.zhihu.com/question/23895384 说到Coroutine,我们必须提到两个更远的东西.在操作系统(os)级别,有进程(process)和线程(threa ...
- 【Excle数据透视】如何在数据透视表字段列表中显示更多的字段
创建完数据透视表之后,由于字段太多,在列表中没有完全显示 解决方案 通过"字段节和区域节并排"功能来显示更多字段 修改后结果 字段已经完全显示出来了! "字段节和区域节层 ...
- MFC中函数的使用
函数语句: ((CStatic*)GetDlgItem(IDC_STATIC1))->SetIcon(AfxGetApp()->LoadIconW(IDI_CLOSE)); 解释: 1.G ...