javascript 多图无缝切换
思路只要是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 多图无缝切换的更多相关文章
- javascript实例学习之八——无缝切换效果
无缝切换在网站的很多地方都有涉及,比如轮播图等. 基本思路: 1)将可视窗当前的元素复制,依次添加为ul中的子元素 2)改变ul整体的left取值(负的窗口值),动画缓动至想要的位置 3)将原视窗(已 ...
- javascript焦点图之缓冲滚动无缝切换
在用于实现无缝切换四张图,所以设置了6个图片就是 4,0,1,2,3,4,0 <!DOCTYPE html> <html> <head> <meta char ...
- jquery 图片无缝切换
想要和园友分享一下学习jquery的经验.总结,更希望园友提出点建议. 第一次写,有不好的地方请多多见谅! 文笔有限,很多时候不知道怎么来描述,唉.硬伤啊!!那只好多做了,贴代码... ok,废话少说 ...
- Android主题换肤 无缝切换
2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...
- 使用jQuery仿淘宝商城多格焦点图滚动切换效果
1.效果及功能说明 图片滚动切换特效,高仿2012淘宝商城首页多格子焦点图切换,鼠标滑过焦点图片各个格子区域聚光灯效果展示 2.实现原理 在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞 ...
- iOS8 无缝切换WKWebView，借鉴IMYWebview，解决进度条，cookie，本地页面等问题
webkit使用WKWebView来代替IOS的UIWebView和OSX的WebView,并且使用Nitro JavaScript引擎,这意味着所有第三方浏览器运行JavaScript将会跟safa ...
- 手写jwt验证，实现java和node无缝切换
前言 前端时间和我朋友写了一个简易用户管理后台,功能其实很简单,涉及到的技术栈有:vue+elementUI,java+spring MVC以及node+egg,数据库用的mysql,简单方便. 一开 ...
- 【DATAGUARD】物理dg配置客户端无缝切换 (八.4)--ora-16652 和 ora-16603错误
[DATAGUARD]物理dg配置客户端无缝切换 (八.4)--ora-16652 和 ora-16603错误 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各 ...
- 【DATAGUARD】物理dg配置客户端无缝切换 (八.3)--客户端TAF 配置
[DATAGUARD]物理dg配置客户端无缝切换 (八.3)--客户端TAF 配置 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你 ...
随机推荐
- bug调试大全
http://www.jianshu.com/p/9fc9fd89bfee http://www.cocoachina.com/ios/20150929/13598.html
- OpenGL ES 2.0 符点精度
片元着色器中使用符点相关类型的变量时与顶点着色器中有所不同,在顶点着色器中直接声明使用即可,而在片元着色器中必须指定精度. lowp 低 mediump 中 highp 高 指定整个着色器中符点相关类 ...
- Linux知识扫盲
1.发现linux中好多软件以d结尾,d代表什么? d 代表 deamon 守护进程守护进程是运行在Linux服务器后台的一种服务程序.现在比较常用 是 service 这个词.它周期性地执行某种任务 ...
- Maven基础教程
更多内容请参考官方文档:http://maven.apache.org/guides/index.html 官方文档很详细,基本上可以查找到一切相关的内容. 另外,快速入门可参考视频:孔浩的maven ...
- JavaScript 作用域和闭包
作用域的嵌套将形成作用域链,函数的嵌套将形成闭包.闭包与作用域链是 JavaScript 区别于其它语言的重要特性之一. 作用域 JavaScript 中有两种作用域:函数作用域和全局作用域. 在一个 ...
- 一则 Mysql 建表语句
DROP TABLE IF EXISTS `nuvue`; CREATE TABLE `nuvue`( `id` ) UNSIGNED NOT NULL AUTO_INCREMENT, `status ...
- python安装——Windows平台
刚刚申请博客,第一次写随笔,记录下自己最近的学习情况,希望自己能够不断的学习,不断的丰富自己~ 最近刚开始学python,记录一下,希望大家相互学习,批评指正~ 1.下载python:https:// ...
- tomcat server.xml 配置示例
规划: 网站网页目录:/web/www 域名:www.test1.com 论坛网页目录:/web/bbs URL:bbs.test1.com/bbs 网站管理 ...
- cf A. Jeff and Digits
http://codeforces.com/contest/352/problem/A #include <cstdio> #include <cstring> #includ ...
- 液晶顯示器 LCD (Liquid Crystal Disply )
常見的液晶顯示器按物理結構分為四種: (1)扭曲向列型(TN-Twisted Nematic): (2)超扭曲向列型(STN-Super TN): (3)雙層超扭曲向列型(DSTN-Dual Scan ...