思路只要是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. EF中加载实体的方式

    EF中的查询执行时机:1. foreach进行枚举2. ToArray.ToList.ToDictionary3. Linq的一些操作,如First.Any4. DbSet上的Load操作.DbEnt ...

  2. js中的for-of循环遍历数组

    遍历数组要怎么做,可能你首先想到的会是for循环,当然for循环在JavaScript 刚萌生的时候就出现了,想到它也是理所当然的 var a=[[1,2],[3,4],5] for(var i=0; ...

  3. 6、统计solr目录索引信息

    package com.main.java.solr.statistics; import org.apache.lucene.document.Document; import org.apache ...

  4. system进程启动普通用户进程调研

    system进程启动普通用户进程 关键函数是CreateProcessAsUser 主要思路是先取得目的用户的token,然后用上面的函数启动 1.从explorer中取token BOOL GetT ...

  5. CI框架uri去掉index.php

    CI框架的入口是index.php,所以url实际上要多出一个index.php,非常不美观.我使用的是apache服务器,要开启mod_rewrite服务才可以. sudo a2enmod rewr ...

  6. 简单的thinkPHP3.2运行实例。

    在上一篇的环境基础下. 我们用zendstudio12.5版本编写我们的代码.具体的下载方式在这里就不多做注明了.自己百度就可以搞定. 首先我们用zendstudio12.5 导入我们从网上随处都可以 ...

  7. 关于cookie， iphone及chrome的异同

    http://www.blogjava.net/jjshcc/archive/2010/06/13/323517.html http://stackoverflow.com/questions/295 ...

  8. 微软在MSDN中更新了Win8.1批量授权版镜像（中文版更新完毕&版本说明）

    微软在MSDN中更新了Win8.1大客户专业版和企业版镜像,零售版镜像(即专业版+核心版二合一镜像)没有更新,依然是9月份发布的版本.已证实,新的批量授权版镜像是集成了GA Rollup A更新,并且 ...

  9. 使用OpenSSL生成证书

    使用OpenSSL生成证书 下载安装openssl,进入/bin/下面,执行命令(把ssl目录下的openssl.cnf 拷贝到bin目录下)1.首先要生成服务器端的私钥(key文件):openssl ...

  10. Hdu3714-Error Curves(三分)

    Josephina is a clever girl and addicted to Machine Learning recently. She pays much attention to a m ...