效果图如下:

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. schema的元素数据类型（复杂数据类型）

    1.简单元素的声明 <xs:element name="元素名称" type="xs:string" default="默认值" mi ...

  2. iOS开发实践之多线程（单例模式）

    单例模式的作用:可以保证在程序运行过程,一个类只有一个实例,而且该实例易于供外界访问,从而方便地控制了实例个数,并节约系统资源. 单例模式的使用场合:在这个应用程序中,共享一份资源(这份资源只需要创建 ...

  3. Deloyment Descriptor Web.xml Analysis

    https://javaee.github.io/tutorial/webapp003.html Web.xml详解分析: 该web.xml文件包含Facelets应用程序所需的几个元素.使用NetB ...

  4. 位运算（2）——Number of 1 Bits

    Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also know ...

  5. Oracle数据表比较记录差异（转）

    liuyx_know|七级 你可以参照一下Oracle的UNION [ALL], INTERSECT, MINUS操作符,至于你的问题你可以使用MINUS操作符,语句如下: SELECT * FROM ...

  6. Android基础Activity篇——其他隐式Intent

    1.使用隐式Intent调用浏览器 修改FirstActivity中的按钮点击事件代码. Intent intent=new Intent(Intent.ACTION_VIEW); intent.se ...

  7. u-boot分析（七）----内存初始化

    u-boot分析(七) 上篇博文我们按照210的启动流程,分析到了时钟初始化,今天我们继续按照u-boot的启动流程对内存的初始化进行分析. 今天我们会用到的文档: 1.        2440芯片手 ...

  8. SharePoint 2010 网络上的开发经验和资源

    sharepoint 集成 Exchange 基于OWA方式获取Exchange中未读邮件  http://www.cnblogs.com/jinho/archive/2011/09/17/21798 ...

  9. mysql在控制台里出现中文问号问题

    由于重装了wampserver,之前遇到的问题统统会重新出现,那么今天遇到的是在mysql控制台中,在表里输入中文数据,却出现问号的问题: 那么这个就跟编码有关系了,那么,我们就去wampserver ...

  10. SIP MGCP和H323的区别

    在Windows中内置的NetMeeting就是典型的H.323协议客户端,而比较常见的SIP系统是微软开发的MSN Messenger系统.首先,由用户A向SIP服务器发出呼叫请求,请求的信息包含自 ...