效果图如下:

HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>无缝滚动</title>

	<style type="text/css">

		body,ul{

			margin:0;

			padding:0;

		}

		.list_con{

			width:1000px;

			height:200px;

			border:1px solid #000;

			margin:10px auto 0;

			background-color:#f0f0f0;

			position:relative;

			overflow:hidden;

		}

		.list_con ul{

			list-style:none;

			width:2000px;

			height:200px;

			position:absolute;

			left:0;

			top:0;

		}

		.list_con li{

			width:180px;

			height:180px;

			float:left;

			margin:10px;

		}

		.btns_con{

			width:1000px;

			height:30px;

			margin:50px auto 0;

			position:relative;

		}

		.left,.right{

			width:30px;

			height:30px;

			background-color:gold;

			position:absolute;

			left:-40px;

			top:124px;

			font-size:30px;

			line-height:30px;

			color:#000;

			font-family: 'Arial';

			text-align:center;

			cursor:pointer;

			border-radius:15px;

			opacity:0.5;

		}

		.right{

			left:1010px;

			top:124px;

		}

	</style>

	<script src="js/move.js"></script>

</head>

<body>

	<div class="btns_con">

		<div class="left" id="btn01"><</div>

		<div class="right" id="btn02">></div>

	</div>

	<div class="list_con" id="slide">

		<ul id="list">

		<li><a href=""><img src="data:images/goods001.jpg" alt="商品图片"></a></li>

		<li><a href=""><img src="data:images/goods002.jpg" alt="商品图片"></a></li>

		<li><a href=""><img src="data:images/goods003.jpg" alt="商品图片"></a></li>

		<li><a href=""><img src="data:images/goods004.jpg" alt="商品图片"></a></li>

		<li><a href=""><img src="data:images/goods005.jpg" alt="商品图片"></a></li>

		</ul>

	</div>

</body>

</html>

JS代码如下：

window.onload = function(){

    // alert(1)

    // 1、自动播放-- 左侧 多次循环 left减小

    var oList = this.document.getElementById('list')

    var oBtn01 = document.getElementById('btn01')

    var oBtn02 = document.getElementById('btn02')

    var oSlide = document.getElementById('slide')

    var num = 0  // left取值

    var speed = -5

    var oTimer = null

    // 程序复制两份产品

    oList.innerHTML += oList.innerHTML

    // oList.innerHTML = oList.innerHTML + oList.innerHTML

    oTimer = setInterval(fnMove, 50)

    function fnMove(){

        num += speed

        // 如果left小于-1000，回到left为0继续左侧移动

        if(num < -1000)

        {

            num = 0

        }

        if(num>0)

        {

            num = -1000

        }

        oList.style.left = num +'px'

    }

    // 2、左右箭头单击，右 -- 右侧移动  左 -- 左侧移动

    oBtn02.onclick = function(){

        speed = 5

    }

    oBtn01.onclick = function(){

        speed = -5

    }

    // 3、鼠标滑过停止播放  - 鼠标离开继续播放

    oSlide.onmouseover = function(){

        // 停止定时器

        clearInterval(oTimer)

    }

    oSlide.onmouseout = function(){

        // 开启定时器

        oTimer = setInterval(fnMove, 50)

    }

}

　　

js动画之无缝滚动的更多相关文章

  1. CSS3动画之无缝滚动

    与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: <div class="box"&g ...

  2. js文字的无缝滚动（上下）

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

  3. js实现标准无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  5. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  6. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  7. js实现表格无缝滚动效果

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

  8. JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。

    一:html部分 <body> <input id="btn1" type="button" value="向左"> ...

  9. 用JS写的无缝滚动特效

    代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

随机推荐

  1. ThinkPHP 统计数据（数字字段）更新 setInc 与 setDec 方法

    ThinkPHP 统计数据更新 ThinkPHP 内置了对统计数据(数字字段)的更新方法: setInc():将数字字段值增加 setDec():将数字字段值减少 setInc() ThinkPHP ...

  2. eleme 项目使用到的库

    探索eleme用到的库 xml re库 通过regex = re.compile(pattern)返回一个pattern对象, 通过该对象匹配正则表达式的字符串, 最好在模式中使用r'some'原始字 ...

  3. GitKraken使用教程-基础部分(3)

    5. 克隆服务器上的项目 首先,返回主界面,点击File => Clone Repo,选择 Clone with URL,如下图: 图 5‑1 SSH方式克隆仓库界面 1) SSH 方式连接仓库 ...

  4. OC与JS交互之UIWebView

    随着H5的强大,hybrid app已经成为当前互联网的大方向,单纯的native app和web app在某些方面显得就很劣势.关于H5的发展史,这里有一篇文章推荐给大家,今天我们来学习最基础的基于 ...

  5. git 突破大文件上传限制

    1.安装 lfs: git lfs install 2.跟踪大文件:git lfs track "file.suffix" 3.添加配置文件:git add .gitattribu ...

  6. Python函数(3)

    一.装饰器 什么是装饰器,装饰器就是用于拓展原来函数功能的一种函数 装饰器就是用来为被装饰对象添加新功能的工具,装饰器本身可以是任意可调用对象,被装饰的对象也可以是任意可调用对象 装饰器遵循一个关键原 ...

  7. MySQL入门很简单: 15 java访问MySQL数据库

    1. 连接数据库 1.1 下载安装驱动 java通过JDBC(Java Database Connectivity,Java数据库连接)来访问MySQL数据库.JDBC的编程接口提供的接口和类与MyS ...

  8. Jmeter入门5 关联 响应数据传递-正则表达式提取器

    在测试过程中,遇到一个问题:用户登录成功后服务器会返回一个登录凭证,之后所有的操作都需要带上此凭证.我们怎么获取登录凭证并传递给后续的操作? Jmeter提供了正则表达式提取器,用变量提取参数,后续通 ...

  9. 触发transition的几种方式--转

    鼠标单击 获取焦点 或元素发生任何改变,怎么说呢,目前的理解是,元素发生了什么改变,使得它跟以前不一样了.比如同样是p元素,先有一个样式.后来这个p被hover了.被focus了.或者通过另外一条途径 ...

  10. jmeter参数化读取数据进行多次运行

    jmeter参数化数据,可以使用csv,还可以使用数据库的方式 1.使用csv读取数据 在线程组中,配置原件中,选择csv data set config 1.本地创建了16个数据,存为test.tx ...