效果图如下:

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. 百度BAE数据库连接问题

    今天第一次使用百度的开发平台BAE,按照入门文档上的操作一步步来,进行的很顺利,可是我在上传了一个cms系统后,进行安装时,卡在了数据库连接这个地方,弄了一下午,终于有了结果,在这里记录起来,希望能帮 ...

  2. 阿里云短信验证~JAVA后台

    maven :中的 pom.xml添加 <dependency> <groupId>com.aliyun</groupId> <artifactId>a ...

  3. 什么是css sprites，如何使用？

    css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片.背景图是否重复.背景图定位),显示图片,减轻服务器对图片的请求数量 优点: 1.减少网页的HTT ...

  4. webpack打包将配置文件单独抽离不压缩打包

    webpack.config.js: plugins: [ //提取公共模块 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', ch ...

  5. POS开发问题 - 输入非数字弹出提示框的实现

    业务场景: 一个输入框,如果输入非数字,那么弹出提示框,如下图 点击确定,输入框自动清空非数字的输入,并且自动获得焦点,如图: 实现方案: 实现的想法: 给输入框添加一个 input 事件,给输入框绑 ...

  6. 腾讯bugly 映射用法

    package com.tencent.bugly.agent; import android.app.Activity; import android.content.Context; import ...

  7. appium （五）desired_caps参数

     转自:http://blog.csdn.net/Yejianyun1/article/details/56279051   一.介绍 在appium server 与手机端建立会话关系时,手机端需要 ...

  8. 关于ubuntu安装软件的问题：apt-get和dpkg区别？

    两者的区别是dpkg绕过apt包管理数据库对软件包进行操作,所以你用dpkg安装过的软件包用apt可以再安装一遍,系统不知道之前安装过了,将会覆盖之前dpkg的安装.1.dpkg是用来安装.deb文件 ...

  9. POJ-2151 Check the difficulty of problems---概率DP好题

    题目链接: https://vjudge.net/problem/POJ-2151 题目大意: ACM比赛中,共M道题,T个队,pij表示第i队解出第j题的概率 问 每队至少解出一题且冠军队至少解出N ...

  10. 【CCPC-Wannafly Winter Camp Day4 (Div1) J】跑跑跑路（爬山）

    点此看题面 大致题意: 共两轮,每轮每人有一个标签,标签相同的人必须到同一个点集合.求所有人总路程的最小值. 爬山算法 这道题貌似有三种做法:模拟退火.高斯消元以及爬山算法. 相比之下,自然是爬山算法 ...