效果图如下:

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. 【Iperf】iperf测试wlan的性能

    1.概念: iperf命令是一个网络性能测试工具.iperf可以测试TCP和UDP带宽质量. iperf可以测量最大TCP带宽,具有多种参数和UDP特性.iperf可以报告带宽,延迟抖动和数据包丢失. ...

  2. 如何结合后台数据库 启动vue项目

    一:连接数据库 1. 点击打开后输入密码 2.查看数据库 show databases; 3.创建数据库 create database jd; 删除数据库 drop database jd; 4.使 ...

  3. Java中mouseDragged有效mouseMoved没响应的可能原因

    1.这个问题在jdk7与jdk8上都会出现. 2.具体表现为: 单独写个测试例子,用JFrame实现了mouseMoved接口,mouseDragged和mouseMoved都输出方法名和坐标,结果是 ...

  4. unity工具介绍

    MemoryProfiler内存分析工具 行为树 behaviac github 场景动画编辑器 Snapdragon Profiler性能分析工具 VTune性能分析器 protobuf数据交换格式 ...

  5. 文件上传PHP

    <?php $targetIp = GetIP(); $fileUpload = 'fileUpload'; $frameCount = 'frameCount'; $fileName = $_ ...

  6. Appium 滑动界面swipe用法

    Appium 滑动API:Swipe(int start x,int start y,int end x,int y,duration) 解释:int start x-开始滑动的x坐标, int st ...

  7. dell Nx000系列交换机

    dell n2048(P) dell n3048(P) dell n4064(F) P: PoE+ F: SFP+ Model GbE 10GbE(SFP+) 40GbE(QSFP+) Layer d ...

  8. JavaScript 编写随机四位数验证码（大小写字母和数字）

    1.JavaScript编写随机四位数验证码,用到的知识点为: a.Math对象的随机数:Math.random() b.Math对象的取整    :Math.floor() c.处理所需要的下标个数 ...

  9. MySQL入门很简单: 7 触发器

    触发器是由事件来触发某个操作,这些事件包括INSERT语句,UPDATE语句和DELETE语句 1.创建触发器 1)创建只有一个执行语句的触发器 例子:再向department表中执行INSERT操作 ...

  10. 初学React：JSX语法

    这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>第一个组件.js 'use strick ...