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值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
随机推荐
- delphi 窗体透明详解TransparentColorValue，窗体透明控件不透明
关于窗体透明的做法 来自:http://blog.csdn.net/shuaihj/article/details/8610343 关于窗体透明的做法 1.在Delphi中,设置窗体的AlphaBle ...
- java基于udp实现键盘录入聊天
发送端 package demo02; import java.io.IOException; import java.net.DatagramPacket; import java.net.Data ...
- 洛谷 P1579 哥德巴赫猜想（升级版）【筛素数/技巧性枚举/易错】
[链接]:https://www.luogu.org/problemnew/show/P1579 题目背景 1742年6月7日哥德巴赫写信给当时的大数学家欧拉,正式提出了以下的猜想:任何一个大于9的奇 ...
- Codeforces 919 D Substring
题目描述 You are given a graph with nn nodes and mm directed edges. One lowercase letter is assigned to ...
- Codeforces 734 F Anton and School
Discription Anton goes to school, his favorite lessons are arraystudying. He usually solves all the ...
- Ruby Time And DateTime之Time in Core
今天遇到一个问题,就是在Ruby中对于Time和DateTime的使用,不是很明了,现在研究一下: 先说Time: 在Ruby2.0中关于Time有两处定义一个是在Core中,http://www.r ...
- phpexcel设置所有单元格的默认对齐方式
代码如下,从国外论坛上找到的 $objPHPExcel->getDefaultStyle()->getAlignment()->setHorizontal(PHPExcel_Styl ...
- Linux下报错：Segmentation fault.
遇到的问题:程序在读文件之后,准备执行fclose(fp);时,出现了如下错误: Program received signal SIGSEGV, Segmentation fault. 解决方法:倒 ...
- matlab修改文件名和删除某类文件
matlab修改多级文件夹路径下的文件名: % %%%%%%%%%%%%%%批量修改文件名一级文件夹 \路径下直接为文件 % close all;clear all;clc; % path='G:\1 ...
- 微信小程序 - 考试前三排名实现
实现原理:利用背景图片以及nth-child实现