<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{ margin:0; padding:0;}

li{ list-style:none;}

#div1{ width:350px; height:60px; border:1px #000000 solid; position:relative; margin:0 auto; }

#div1 ul{ position:absolute; left:0;}

#div1 ul li{ width:80px; height:60px; margin-right:10px; float:left;}

</style>

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

<script type="text/javascript">

window.onload = function ()

{

    var oinput = document.getElementById('input1')

    var oul = document.getElementById('ul1');

    var oli = oul.getElementsByTagName('li')

    var inum = 4;

    var onesize = oli[0].offsetWidth + 10;

    var btn = true;

    function getWidth()

    {

        oul.style.width = onesize * oli.length + 'px';

    }

    getWidth();

    oinput.onclick = function ()

    {

        if(btn)

        {

            btn = false;

            for( var i = 0; i < inum; i++ )

            {

                var ali = oli[i].cloneNode(true);

                oul.appendChild(ali);

                getWidth();

            }

            startMove(oul,{left: -inum*onesize},function ()

            {

                for(var i = 0; i < inum; i++ )

                {

                    oul.removeChild(oli[0]);

                    oul.style.left = 0;

                }

            })

            btn = true;

        }

    }

}

</script>

</head>

<body>

<input type="button" value="切换" id="input1" />

<div id="div1">

    <ul id="ul1">

        <li><img src="img/1- (1).jpg" /></li>

        <li><img src="img/1- (2).jpg" /></li>

        <li><img src="img/1- (3).jpg" /></li>

        <li><img src="img/1- (4).jpg" /></li>

        <li><img src="img/1- (5).jpg" /></li>

    </ul>

</div>

</body>

</html>

js_sl 无缝切换的更多相关文章

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

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

  2. jquery 图片无缝切换

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

  3. Android主题换肤 无缝切换

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

  4. 面向对象的方式进行数据交换网络之间的差异--无缝切换的发展到单机游戏C/S模式

    上一页本文描述描述有关数据的发展过程之间的差异支撑点,这里展示的另一个特点:无缝切换的发展,以独立C/S模式 一般C/S模式都面临一个问题: 就是开发过程中的调试难题,由于涉及到client和服务端相 ...

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

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

  6. log4net使用封装，无缝切换 dotnet 和 dotnetcore

    log4net使用封装,无缝切换 dotnet 和 dotnetcore Intro 自己有几个自己的小项目,有许多公用的方法/扩展/工具类等等,于是封装了一些常用的工具类/扩展方法 WeihanLi ...

  7. 面对对象之差异化的网络数据交互方式--单机游戏开发之无缝切换到C/S模式

    上一篇这里描写叙述了一个关于差异数据在开发过程中的一个长处,这里来演示另外一个特点:单机开发之无缝切换到C/S模式 一般C/S模式都面临一个问题: 就是开发过程中的调试难题,由于涉及到client和服 ...

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

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

  9. EasyDSS视频点播服务器实现多分辨率/多码率无缝切换的办法

    EasyDSS流媒体音视频直播与点播服务器软件,是一套提供一站式的转码.点播.直播.检索.回放.录像下载服务的高性能RTMP/HLS/HTTP-FLV流媒体服务,极大地简化了流媒体相关业务的开发和集成 ...

随机推荐

  1. github创建repo，本地导入git项目到github

    一般地,在注册好github账号之后,你需要做的事情就是在github上创建一个repo,该repo将成为你的origin(central)repo,随后你就可以将本地的项目git repo导入到这个 ...

  2. 示例可重用的web component方式组织angular应用模块

    在online web应用中,经常有这样的需求,能够让用户通过浏览器来输入代码,同时能够根据不同的代码来做语法高亮.大家已知有很多相应的javascript库来实现语法高亮的功能,比如codemirr ...

  3. file类型允许的文件格式设置问题，“选择文件”打开缓慢

    1,file类型的input对于打开的选择框的属性是由以下两个属性控制的: ①multiple="multiple" :一次可以选择多个文件 ②accept="image ...

  4. 查找所有含有表名（abc）的存储过程 执行脚本

    SELECT obj.Name , sc.TEXT FROM syscomments sc INNER JOIN sysobjects obj ON sc.Id = obj.ID WHERE sc.T ...

  5. JAVA字符串格式化-String.format()的使用 (转载)

    常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重 ...

  6. UVa 11093 Just Finish it up

    从第一个加油站开始枚举起点,如果到第i个加油站油量不够的话,那么1~i个加油站都不可能是起点. 将第i+1个加油站作为起点继续枚举. 比如说,第一个加油站开始最多跑到第5个加油站,那么第二个加油站不可 ...

  7. 漫游Kafka设计篇之性能优化

    Kafka在提高效率方面做了很大努力.Kafka的一个主要使用场景是处理网站活动日志,吞吐量是非常大的,每个页面都会产生好多次写操作.读方面,假设每个消息只被消费一次,读的量的也是很大的,Kafka也 ...

  8. Android Window 9问9答

    1.简述一下window是什么?在android体系里 扮演什么角色? 答:window就是一个抽象类,他的实现类是phoneWindow.我们一般通过windowManager 来访问window. ...

  9. Android SurfaceView使用详解

    1. SurfaceView的定义前面已经介绍过View了,下面来简单介绍一下SurfaceView,参考SDK文档和网络资料:SurfaceView是View的子类,它内嵌了一个专门用于绘制的Sur ...

  10. apple-touch-icon,shortcut icon和icon的区别

    apple-touch-icon 可以了解到这是一个类似网站favicon的图标文件,用来在iphone和ipod上创建快捷键时使用. 这个文件应当是png格式,57x57像素大小,放在网站根目录之下 ...