无缝切换在网站的很多地方都有涉及，比如轮播图等。

基本思路：

1）将可视窗当前的元素复制，依次添加为ul中的子元素

2）改变ul整体的left取值（负的窗口值），动画缓动至想要的位置

3）将原视窗（已被复制）的各个li删除

4）将ul的left取值重新调整为0

实现的html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <style>
        *{margin:;padding: ;box-sizing:border-box;}
        div{width:480px;height:150px;border:5px solid #; margin-left:300px;   position: relative;}
        ul{  overflow: hidden; position: absolute; left: ;}
        ul li{width:150px; height:150px; background:blue;float:left;margin-right:10px;list-style: none; color:white; font-size: 34px;text-align: center;}
    </style>
</head>

<body>
    <div id="div1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <button id="btn">切换</button>

    <script src="./commonJs/tool.js"></script>
    <script src="./commonJs/base.js"></script>
    <script src="./usualEffects/js/mySwitch.js"></script>

</body>

</html>

无缝切换html代码

js代码：

$(function() {
    ];
    var aLis = document.getElementsByTagName('li');
    ].offsetWidth + ;
    ;
    var showWidth = showNum * oneSize;
    var btn = document.getElementById('btn');
    var flag = true;

    function setUlWidth() {
        var sumWidth = aLis.length * oneSize;
        console.log('sumWidth:' + sumWidth);
        oUl.style.width = sumWidth + 'px';
    }
    setUlWidth();
    btn.addEventListener('click', function() {
        //为了防止动画累加，设置flag参数，只有当上次动画结束之后，才可能开始下一次动画
        if (flag) {
            flag=false;
            ; i < showNum; i++) {
                //将前面showNum个元素复制，粘贴到列表后面
                var cloneNode = aLis[i].cloneNode(true);
                oUl.appendChild(cloneNode);
                setUlWidth();
            }
            $(oUl).animate({ 'left': -showWidth + 'px' }, function() {
                //动画结束之后的回调
                //删除添加的元素
                ; k < showNum; k++) {
                    ]);
                }
                //将ul的left值复原
                ;
                flag=true;
            });
        }
    }, false);

});

无缝切换js代码

javascript实例学习之八——无缝切换效果的更多相关文章

  1. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  2. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  3. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  5. javascript 多图无缝切换

    思路只要是ul移动前,首先将当前显示的li克隆岛ul最后,当每次运动执行完毕后,再将前面的li删除,如此循环. <!DOCTYPE html> <html> <head& ...

  6. 使用javascript实现图片上下切换效果并且实现顺序循环播放

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  7. 无JavaScript实现选项卡轮转切换效果

    CSS:   .box{width:200px; height:100px; border:1px solid #ddd; overflow:hidden;}.list{width:200px; he ...

  8. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  9. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

随机推荐

  1. CSS权威指南 - 基础视觉格式化 2

    行内元素 em a 非替换元素 img 替换元素 两者在内联内容处理方式不一样. inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box. 行布局 ...

  2. Memcached 笔记与总结（1）Linux（CentOS 6.6） 和 Windows（7）下安装与配置 Memcached （1.4.24）与 Memcached 基础命令

    Memcached 官方网站:http://memcached.org/ 官网对其的描述是: What is Memcached? Free & open source, high-perfo ...

  3. Javascript 笔记与总结（1-6）Javascript 面向对象

    在 JavaScript 中,有对象,没有类(但有构造函数). 在 JavaScript 中,对象不依赖于类而存在,可以直接生成. {key:value, key:value} 这种格式的对象,成为 ...

  4. 转载：C/C++源代码到可执行程序的过程详解

    C/C++源代码到可执行程序的过程详解 编译,编译程序读取源程序(字符流),对之进行词法和语法的分析,将高级语言指令转换为功能等效的汇编代码,再由汇编程序转换为机器语言,并且按照操作系统对可执行文件格 ...

  5. C语言 可变参数

    一.基础部分 1.1 什么是可变长参数 可变长参数:顾名思义,就是函数的参数长度(数量)是可变的.比如 C 语言的 printf 系列的(格式化输入输出等)函数,都是参数可变的.下面是 printf ...

  6. Bootstrap页面布局13 - BS按钮

    bootstrap中的按钮类 一般可以作为按钮的标签有:<a></a>  <button></button>  <input type='butt ...

  7. HK游记 Day2迪斯尼(下）

    接下来我们要去看狮子王庆典,绕啊绕啊,终于进场了,说实话我对一大帮人扮演动物歌舞表演不是很感冒,静倒是觉得很好看,印象最深的是狮子王的主题曲,还有大象车,长颈鹿车,狮子王车,静举着手机拍视频. 看完表 ...

  8. Off-heap Memory in Apache Flink and the curious JIT compiler

    https://flink.apache.org/news/2015/09/16/off-heap-memory.html   Running data-intensive code in the J ...

  9. linux ntp时间同步

    linux ntp时间同步 一.搭建时间同步服务器1.编译安装ntp serverrpm -qa | grep ntp若没有找到,则说明没有安装ntp包,从光盘上找到ntp包,使用rpm -Uvh n ...

  10. CSS :before和:after (转)

    前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式.今天主要想在这篇学习笔记中写的也不多,主要是针对:bef ...