效果图如下:

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. php 关于时间的函数

    //返回1970年1月1日零点以来的秒数.    //定义为从格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数. time(); ...

  2. HDU 5351——MZL's Border——————【高精度+找规律】

    MZL's Border Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  3. css3重点回顾字体

    1.字体 免费字体下载https://cn.ffonts.net/

  4. MVC HtmlHelper listbox用法

    主要实现MVC listbox左右移动,搜索左边用户 controller   List<userinfo> lstUserInfo = new List<userinfo>( ...

  5. C#中实体集合和实体转换成相应的string、XDocument、XElement

    C#中实体集合和实体转换成相应的string.XDocument.XElement public class SimpleXmlConverter { public static string ToX ...

  6. 实现多ComboBox复杂查询 使用ComboBoxDisplay Value属性

    首先创建一个类 class ComboBoxItem { public string Text { get; set; } public object Value { get; set; } //这个 ...

  7. 网页设计，Access入门 2010，数学

    网页设计(表格) 创建表格:插入---表格---设置表格大小---确定.(按Ctrl键可多选单元格) 插入图片在表格:光标在单元格---插入---图像---选择图像---确定. 表格属性:属性(屏幕下 ...

  8. struts2分页实现

    1.定义一个page类,里面包括每一个的数量,当前页码,总记录数,等 2.将page对象传入dao中,dao输出分页查询好的数据.返回到action中,action放到request中,jsp从req ...

  9. bai_du 采集代码（已过期）

    <?php $url = "http://www.baidu.com/s?wd=site:www.xxxxxx.com+inurl:hot&tn=baidulaonian&am ...

  10. android 学习之ViewDragHelper

    ViewDragHelper是用来移动ViewGroup中子View的,之前写View的移动都是通过scrollTo来实现,但是它移动的是VIew中的内容,ViewGroup中的所有的子View都会移 ...