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

基本思路：

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

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

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

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

实现的html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>测试页面</title>
  7.     <style>
  8.         *{margin:;padding: ;box-sizing:border-box;}
  9.         div{width:480px;height:150px;border:5px solid #; margin-left:300px;   position: relative;}
  10.         ul{  overflow: hidden; position: absolute; left: ;}
  11.         ul li{width:150px; height:150px; background:blue;float:left;margin-right:10px;list-style: none; color:white; font-size: 34px;text-align: center;}
  12.     </style>
  13. </head>
  14.  
  15. <body>
  16.     <div id="div1">
  17.         <ul>
  18.             <li></li>
  19.             <li></li>
  20.             <li></li>
  21.             <li></li>
  22.             <li></li>
  23.         </ul>
  24.     </div>
  25.     <button id="btn">切换</button>
  26.  
  27.     <script src="./commonJs/tool.js"></script>
  28.     <script src="./commonJs/base.js"></script>
  29.     <script src="./usualEffects/js/mySwitch.js"></script>
  30.  
  31. </body>
  32.  
  33. </html>

无缝切换html代码

js代码：

  1. $(function() {
  2.     ];
  3.     var aLis = document.getElementsByTagName('li');
  4.     ].offsetWidth + ;
  5.     ;
  6.     var showWidth = showNum * oneSize;
  7.     var btn = document.getElementById('btn');
  8.     var flag = true;
  9.  
  10.     function setUlWidth() {
  11.         var sumWidth = aLis.length * oneSize;
  12.         console.log('sumWidth:' + sumWidth);
  13.         oUl.style.width = sumWidth + 'px';
  14.     }
  15.     setUlWidth();
  16.     btn.addEventListener('click', function() {
  17.         //为了防止动画累加，设置flag参数，只有当上次动画结束之后，才可能开始下一次动画
  18.         if (flag) {
  19.             flag=false;
  20.             ; i < showNum; i++) {
  21.                 //将前面showNum个元素复制，粘贴到列表后面
  22.                 var cloneNode = aLis[i].cloneNode(true);
  23.                 oUl.appendChild(cloneNode);
  24.                 setUlWidth();
  25.             }
  26.             $(oUl).animate({ 'left': -showWidth + 'px' }, function() {
  27.                 //动画结束之后的回调
  28.                 //删除添加的元素
  29.                 ; k < showNum; k++) {
  30.                     ]);
  31.                 }
  32.                 //将ul的left值复原
  33.                 ;
  34.                 flag=true;
  35.             });
  36.         }
  37.     }, false);
  38.  
  39. });

无缝切换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. POJ 3254 Corn Fields（状压DP）

    Corn Fields Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 13732   Accepted: 7216 Desc ...

  2. POJ 2777 Count Color（线段树染色，二进制优化）

    Count Color Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 42940   Accepted: 13011 Des ...

  3. IIS5与IIS6 应用程序生命周期和页生命周期

    在写这篇博客之前,知好多前辈已经写过,自己班门弄斧,主要是加深自己对细节的理解,另一方面希望对浏览此篇文章的读者一个新的认识.注定是一长篇.肯定有新的认识,图示都是原创. 此篇所有牵涉的细节,我会一一 ...

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

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

  5. Redis 笔记与总结3 list 类型

    redis 版本 [root@localhost ~]# redis-server --version Redis server v= sha=: malloc=jemalloc- bits= bui ...

  6. PHP 查询时区与设置时区

    使用以下语句来查询当前时区设置 date_default_timezone_get() 使用以下语句设置当前时间为北京时间 date_default_timezone_set('PRC');

  7. Web 在线文件管理器学习笔记与总结（15）剪切文件夹 （16）删除文件夹

    (15)剪切文件夹 ① 通过rename($oldname,$newname) 函数实现剪切文件夹的操作 ② 需要检测目标文件夹是否存在,如果存在还要检测目标目录中是否存在同名文件夹,如果不存在则剪切 ...

  8. 合金装备V 幻痛 制作技术特辑

    合金装备V:幻痛 制作特辑 资料原文出自日版CGWORLD2015年10月号   在[合金装备4(Metal Gear Solid IV)]7年后,序章作品[合金装备5 :原爆点 (Metal Gea ...

  9. visual studio粘贴html代码.会自行添加一些未知代码(自动格式化)

    比如我们要粘贴这样一段代码到VS这里 <option {if empty($param.is_active)}selected=selected{/if}>请选择</option&g ...

  10. php常用Stream函数集介绍

    php常用Stream函数集介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-06-24   本篇文章是对php中的常用Stream函数集进行了详细的分析介绍,需要的朋友参考下     ...