思路只要是ul移动前，首先将当前显示的li克隆岛ul最后，当每次运动执行完毕后，再将前面的li删除，如此循环。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

</head>

<style type="text/css">

	.wrap{

        width:320px;

        height:50px;

        overflow: hidden;

        margin:0 auto;

        margin-top:50px;

        position: relative;

        border:1px solid #333;

	}

	.wrap ul{

		position: absolute;

		overflow: hidden;

		padding:0px;

		margin:0;

		/*这个属性很重要，moveStart需要获取到*/

		left:0px;

	}

	.wrap ul li{

		width:100px;

		height:50px;

		float: left;

		line-height: 50px;

		text-align:center;

		background:orange;

		font-size: 16px;

		margin-right: 10px;

		color:#fff;

		list-style-type: none;

	}

</style>

<body>

    <input type="button" value ="我要切" id="tab">

    <div class="wrap" id="wrap">

    	<ul>

    		<li>1</li>

    		<li>2</li>

    		<li>3</li>

    		<li>4</li>

    	</ul>

    </div>

</body>

</html>

<script type="text/javascript" src="startMove.js"></script>

js

<script type="text/javascript">

	window.onload = function(){

        var iNum = 3;

		var oBtn = document.getElementById('tab');

        var timer;

		var wrap = document.getElementById('wrap');

		var oUl = wrap.getElementsByTagName('ul')[0];

        var b = true;

		var aLi = oUl.getElementsByTagName('li');

		//获取每个单位的宽度包括li的宽度和margin

		var oSize = parseInt(getStyle(aLi[0],'marginRight')) + parseInt(getStyle(aLi[0],'width'));

		//设置ul的宽度

	    function getWidth(){

	    	oUl.style.width = aLi.length * oSize +'px';

	    }

	    getWidth();

        //移动函数

        function slider(){

        	//防止连续点击切换bug

            if(b){

            	//在运动函数没有结束之前，b为false，点击无效

                b=false;

            	for (i = 0; i< iNum ;i++){

            		//复制iNum个li

	            	var oLi = aLi[i].cloneNode(true);

	            	//移动到ul最后

	            	oUl.appendChild(oLi);

	            	//重新设置宽度

	            	getWidth();

                }

                //运动函数startMove(obj,json,fn)

                startMove(

                	//当前对象

                	oUl,

                	//移动距离

                	{left : -iNum * oSize},

                	//回调

                	function(){

	            	    for( i = 0; i< iNum ; i++){

	            	    	//移除第一个li

	            		    oUl.removeChild(aLi[0]);

	            		    //设置ul的left为0

	            	        oUl.style.left = 0 +'px';

	            	    }

	            	    //运动结束，b为true，可以继续下一次点击

	            	    b=true;

	                }

	            );

            }

        };

        //触发

        oBtn.onclick = function(){

        	if(t){

        		clearInterval(t);

        	}

        	slider();

        };

        //自动播放

        function autoPlay(t){

        	timer = setInterval(slider,t);

        }

        autoPlay(3000)

	};

</script>

startMove.js

function startMove(obj, json, fn) {

	clearInterval(obj.timer);

	obj.timer = setInterval(function() {

		var bStop = true;

		for (attr in json) {

			var icur = 0;

			icur = (attr == 'opacity') ? Math.round(getStyle(obj, attr) * 100) : parseInt(getStyle(obj, attr));

			var iSpeed = (json[attr] - icur) / 8;

			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

			if (icur != json[attr]) {

				bStop = false;

			}

			if (attr == 'opacity') {

				obj.style.filter = 'alpha(opacity:' + (icur + iSpeed) + ')';

				obj.style.opacity = (icur + iSpeed) / 100;

			} else {

				obj.style[attr] = icur + iSpeed + 'px';

			}

		}

		if (bStop) {

			clearInterval(obj.timer);

			if (fn) {

				fn();

			}

		}

	}, 30);

}

function getStyle(obj, attr) {

	if (obj.currentStyle) {

		return obj.currentStyle[attr];

	} else {

		return getComputedStyle(obj, false)[attr];

	}

}

　　

javascript 多图无缝切换的更多相关文章

  1. javascript实例学习之八——无缝切换效果

    无缝切换在网站的很多地方都有涉及,比如轮播图等. 基本思路: 1)将可视窗当前的元素复制,依次添加为ul中的子元素 2)改变ul整体的left取值(负的窗口值),动画缓动至想要的位置 3)将原视窗(已 ...

  2. javascript焦点图之缓冲滚动无缝切换

    在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...

  3. jquery 图片无缝切换

    想要和园友分享一下学习jquery的经验.总结,更希望园友提出点建议. 第一次写,有不好的地方请多多见谅! 文笔有限,很多时候不知道怎么来描述,唉.硬伤啊!!那只好多做了,贴代码... ok,废话少说 ...

  4. Android主题换肤 无缝切换

    2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...

  5. 使用jQuery仿淘宝商城多格焦点图滚动切换效果

    1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...

  6. iOS8 无缝切换WKWebView，借鉴IMYWebview，解决进度条，cookie，本地页面等问题

    webkit使用WKWebView来代替IOS的UIWebView和OSX的WebView,并且使用Nitro JavaScript引擎,这意味着所有第三方浏览器运行JavaScript将会跟safa ...

  7. 手写jwt验证，实现java和node无缝切换

    前言 前端时间和我朋友写了一个简易用户管理后台,功能其实很简单,涉及到的技术栈有:vue+elementUI,java+spring MVC以及node+egg,数据库用的mysql,简单方便. 一开 ...

  8. 【DATAGUARD】物理dg配置客户端无缝切换 (八.4)--ora-16652 和 ora-16603错误

    [DATAGUARD]物理dg配置客户端无缝切换 (八.4)--ora-16652 和 ora-16603错误 一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读 各 ...

  9. 【DATAGUARD】物理dg配置客户端无缝切换 (八.3)--客户端TAF 配置

    [DATAGUARD]物理dg配置客户端无缝切换 (八.3)--客户端TAF 配置 一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读 各位技术爱好者,看完本文后,你 ...

随机推荐

  1. js Date扩展Format()函数

    Date.prototype.Format = function (formatStr) { var str = formatStr; var Week = ['日', '一', '二', '三', ...

  2. windows消息常量值

    WM_NULL = 0WM_CREATE = 1应用程序创建一个窗口WM_DESTROY = 2一个窗口被销毁WM_MOVE = 3移动一个窗口WM_SIZE = 5改变一个窗口的大小WM_ACTIV ...

  3. c# 取得扩展名

    string KZM=files[0].FileName.Substring(files[0].FileName.LastIndexOf(".") + 1);

  4. 读取并解析properties文件

    public class SysConfig { private static final Properties properties = new Properties(); static{ Reso ...

  5. Linux设置日期

    $ date -s "2016-07-13 14:54" 把时间设置为2016-07-13 14:54

  6. RCP打包出来 运行 出现 JVM terminated.exit code = 13

    在建立PM.product,即打包时,没有添加相应的插件,导致无法运行

  7. HDU 4268 Alice and Bob set用法

    题目地址: http://acm.hdu.edu.cn/showproblem.php?pid=4268 贪心思想,用set实现平衡树,但是set有唯一性,所以要用 multiset AC代码: #i ...

  8. mysql to sql sersver

    USE SCK_PARA GO /****** Object:  StoredProcedure [dbo].[syncdata_mysql2sqlserver]    Script Date: 08 ...

  9. Java中通过递归调用删除文件夹下所有文件

    摘自 : http://blog.sina.com.cn/s/blog_79333b2c0100xiu4.html import java.io.File; public class FileTest ...

  10. 混入模式(max-in)实现继承

    混入模式并不是一种复制完整的对象,而是从多个对象中复制出任意的成员并将这些成员组合成一个新的对象. 实现如下: function mix(){ var arg,prop,child = {}; for ...