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值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...
随机推荐
- hdu 3657 最小割的活用 / 奇偶方格取数类经典题 /最小割
题意:方格取数,如果取了相邻的数,那么要付出一定代价.(代价为2*(X&Y))(开始用费用流,敲升级版3820,跪...) 建图: 对于相邻问题,经典方法:奇偶建立二分图.对于相邻两点连边2 ...
- 2016百度之星资格赛 Round1(2,3,4题)
Problem B Accepts: 2515 Submissions: 9216 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536 ...
- LeetCode OJ-- Count and Say
https://oj.leetcode.com/problems/count-and-say/ 求经过n次变换后,变成了什么. 1 11 21 1211 111221 ps. 3 变成 ‘3 ...
- go 函数回调
- ActiveMQ spring （一）
在5.8.0版本下 配置成功. 参考文档:http://yinbinhome.iteye.com/blog/1273228
- 向现有mvc程序中加入devexpress report
Open your ASP.NET MVC project. In the main menu of Visual Studio, click the DEVEXPRESS submenu and s ...
- 【python】redis基本命令和基本用法详解
[python]redis基本命令和基本用法详解 来自http://www.cnblogs.com/wangtp/p/5636872.html 1.redis连接 redis-py提供两个类Redis ...
- Failed to fetch URL http://dl-ssl.google.com/android/repository/repository.xml, reason:
Failed to fetch URL http://dl-ssl.google.com/android/repository/repository.xml, reason: Connection t ...
- python测试网络可达性的方法
1.ping连通性测试 #!/usr/bin/env python #-*- coding: utf-8 -*- import os,sys,re import subprocess def NetC ...
- 一种全新的自动调用ajax方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...