JS实现图片不间断滚动
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#outside{
width: 1200px;
overflow: hidden;
margin: 0 auto;
height: 300px;
}
#outside #inside{
width: 3100px;
}
#outside #inside div{
width: 300px;
height: 300px;
margin: 0px 5px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div id="outside">
<div id="inside">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var num = 0;
var inside = document.getElementById("inside");
setInterval(function(){
num-=1;
inside.style.marginLeft = num+"px";
console.log(inside.style.marginLeft);
if(num<=-1860){
num = 0;
}
},1);
</script>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside{
width: 800px;
height: 200px;
overflow: hidden;
}
#div{
width: 1000000px;
}
#div1,#div2{
width: auto;
float: left;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="outside">
<div id="div">
<div id="div1">
<img src="../img/2017-03-14_124354.png" />
<img src="../img/2017-03-14_124422.png"/>
<img src="../img/2017-03-14_124708.png"/>
<img src="../img/2017-03-14_131608.png"/>
</div>
<div id="div2"></div>
</div>
</div>
<script type="text/javascript">
var outside=document.getElementById("outside");
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div2.innerHTML=div1.innerHTML;
var gunDong=setInterval(function(){
if(div2.offsetWidth-outside.scrollLeft<=0) {
outside.scrollLeft-=div1.offsetWidth
}else{
outside.scrollLeft++;
}
},10)
//.offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变
//.scrollLeft 代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度
outside.onmouseover=function() {
clearInterval(gunDong); //鼠标放上滚动停止
}
outside.onmouseout=function() {//鼠标移开继续滚动
gunDong=setInterval(function(){
if(div2.offsetWidth-outside.scrollLeft<=0) {
outside.scrollLeft-=div1.offsetWidth
}else{
outside.scrollLeft++;
}
},10)
}
</script>
</body>
</html>
JS实现图片不间断滚动的更多相关文章
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- 用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...
- 使用JS实现图片轮播滚动跑马灯效果
我的第一篇文章.哈哈.有点小鸡冻. 之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...
- js 实现图片无限横向滚动效果
门户网站好多都有产品无线滚动展现的效果: 测试demo1 -- 非无缝滚动(可以看出来从头开始的效果): css样式如下: .box{ width: 1000px; border: 1px solid ...
- 横向不间断滚动DIV
横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...
- js实现图片的等比例缩放
js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgO ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- js实现图片向上播放（轮番滚动）
js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...
随机推荐
- <c>----<choose><when><otherwise>
<c:choose> <c:when test="${username== '1' && password== '2'}"> <jsp ...
- Jmeter正则提取list中相同key的value和出现的次数
list中如何计算某个key出现的次数以及通过正则关联参数化呢? 首先要通过正则提取出现key的value 举例:
- JAVA发送邮件的DEMO
最近有朋友问邮件怎么发送,就简单写了个demo,因为懒得找jar包,所以项目是创建的maven工程,具体的maven引用的jar如下: <dependency> <groupId&g ...
- linux yum下载文件的存放位置
默认是: /var/cache/yum也可以在 /etc/yum.conf 指定cachedir=/var/cache/yum #存放目录keepcache=1 #1为保存 0为不保存metadata ...
- Asp.NetCore1.1版本没了project.json，这样来生成跨平台包
本章将要和大家分享的是Asp.NetCore1.1版本去掉了project.json后如何打包生成跨平台包, 为了更好跟进AspNetCore的发展,把之前用来做netcore开发的vs2015卸载后 ...
- Bootstrap 组件之 Navbar
一.简介 Navbar 指导航条,它在移动设备上显示为折叠状态,在宽屏幕上水平展开.这里 是一个线上例子. 响应式导航条依赖 collapse 插件,定制 Bootstrap 时务必要包含. {设备的 ...
- iOS开发之Xib和storyboard对比
相同点: (2)都用来描述软件界面 (2)都用Interface Builder工具来编辑 不同点: (1)Xib是轻量级的,用来描述局部的UI界面 (2)Storyboard是重量级的,用来描述整个 ...
- 记一次搭建SS服务器，完整的过程。
前言 这几天为了登录外网查询资料,谷歌经常抽风,国外的博客也打不开,都要整崩溃了.我以前(直到昨天以前)都是使用修改hosts来访问外网的,用的是 老D(https://laod.cn/hosts) ...
- 字符串的模式匹配（Java实现）
字符串的模式匹配 字串的定位操作通常称做模式匹配,是各种串处理系统中最重要的操作之一.本文主要介绍两种常用的实现算法: 1.暴力匹配 2.KMP算法 1.暴力匹配 时间复杂度为O(n*m):n为主串长 ...
- Eric的第一天
我叫刘志扬(ERIC),今天第一次来博客园,我是一个爱编程的小子,我使用开发工具Androidstudio(AS)我要把今后的问题记录在博客园里,欢迎大家点评,吐槽.