实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间。

  js中关于定时器的方法有两种:setTimeout和setInterval。它们接收的参数是一样的,第一个参数是函数,用于定时器的执行,第二个参数是数字,表示多少毫秒之后执行函数。它们的不同点在于setTimeout只执行一次指定的函数,而setInterval则每隔规定的时间就执行一次指定的函数。

  在定时器后面我们还要知道清除定时器的方法:clearTimeout和clearInterval。它们都只接收一个参数,即定时器返回的值,用于消除指定的定时器。

  知道定时器以后我们就要想办法让图片动起来,让图片元素按一定的速度移位就能实现。可以用js控制元素的样式,例如:

  oUl.style.left = oUl.offsetLeft + speed + 'px';//其中speed的正负可以改变移动的方向。

  代码如下:

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>ZuiYangDan</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
} #container {
width: 100%;
border: 1px solid #aaa;
margin: 100px 0px;
} #pictures {
width: 100%;
height: 520px;
overflow: hidden;
position: relative;
} #ul1 {
position: absolute;
left: 0;
top: 0;
overflow: hidden;
} #ul1 li {
float: left;
width: 700px;
height: auto;
} #ul1 li img {
width: 700px;
height: auto;
} </style>
<script>
window.onload = function() {
var oDiv = document.getElementById("pictures");
var oUl = document.getElementById("ul1");
var speed = -3;
var oLi = document.getElementsByTagName("li"); oUl.innerHTML += oUl.innerHTML;//先把图片增加一组
oUl.style.width = oLi.length * oLi[0].offsetWidth + "px"; function move() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = "0";
}
oUl.style.left = oUl.offsetLeft + speed + "px";
}
var timer = setInterval(move, 30);
oDiv.onmouseover = function() {
clearInterval(timer);
};
oDiv.onmouseout = function() {
timer = setInterval(move, 30);
};
} </script>
</head> <body>
<div id="container">
<div id="pictures">
<ul id="ul1">
<li><img src="./image/P70225-210657.jpg" alt=""></li>
<li><img src="./image/P70225-210750.jpg" alt=""></li>
<li><img src="./image/P70225-210838.jpg" alt=""></li>
<li><img src="./image/P70225-210909.jpg" alt=""></li>
</ul>
</div>
</div>
</body> </html>

用js实现图片的无缝滚动效果的更多相关文章

  1. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  2. js 实现图片无限横向滚动效果

    门户网站好多都有产品无线滚动展现的效果: 测试demo1 -- 非无缝滚动(可以看出来从头开始的效果): css样式如下: .box{ width: 1000px; border: 1px solid ...

  3. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  4. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  6. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  7. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  8. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  9. js函数——倒计时模块+无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. Jmeter生成html格式测试报告

    使用jmeter进行性能测试,运行完毕后生成html格式的测试报告,需要进行如下操作: 1.在C:\apache-jmeter-3.0\bin文件夹下的user.properties文本中添加如下信息 ...

  2. 使用JDBC连接数据库(一)

    JDBC是由java编程语言编写的类及接口组成,同时它为程序开发人员提供了一组用于实现对数据库访问的JDBC API,并支持SQL语言.利用JDBC可以将JAVA代码连接到oracle.DB2.SQL ...

  3. <context:component-scan>详解

    默认情况下,<context:component-scan>查找使用构造型(stereotype)注解所标注的类,如@Component(组件),@Service(服务),@Control ...

  4. 安装grub

    安装windows后,grub不见了 先安装Neo进入Linux 两条命令搞定. 在root用户下输入: update-grub grub-install /dev/sda

  5. List<bean>转换Jsonarray知识心得

    使用基本的jdbc连接mysql,获取数据. 创建实体类user: package com.json; public class user { private int id; private Stri ...

  6. iOS开发之Runtime常用示例总结

    经常有小伙伴私下在Q上问一些关于Runtime的东西,问我有没有Runtime的相关博客,之前还真没正儿八经的总结过.之前只是在解析第三方框架源码时,聊过一些用法,也就是这些第三方框架中用到的Runt ...

  7. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  8. 2017-2-23 C#基础 中间变量

    用中间变量做这个题 1."请输入年份:"(1-9999) "请输入月份:"(1-12) "请输入日期:"(要判断大小月,判断闰年) 判断输入 ...

  9. keepalived 安装配置

    keepalived介绍 1. keepalived 是lvs 的扩展项目,因此它们之间具备良好的兼容性. 2. 通过对服务器池对象的健康检查,实现对失效机器/服务的故障隔离. 3. 负载均衡器之间的 ...

  10. git如何解决冲突(代码托管在coding)

    分支A提交合并请求到分支B,有冲突 git fetch code 拉取远程仓库的其他分支代码(我拉代码是remote add code所以这里是code,可以用git remote查看) git ch ...