自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动播放——幻灯片缓冲效果</title>
<style>
body,div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{background:#000;text-align:center;font:12px/20px Arial;}
#box{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;}
#box .list{position:relative;width:490px;height:170px;overflow:hidden;}
#box .list ul{position:absolute;top:0;left:0;}
#box .list li{width:490px;height:170px;overflow:hidden;}
#box .count{position:absolute;right:0;bottom:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
#tmp{width:100px;height:100px;background:red;position:absolute;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oBox = document.getElementById("box");
var oList = oBox.getElementsByTagName("ul")[0];
var aImg = oBox.getElementsByTagName("img");
var timer = playTimer = null;
var index = i = 0;
var bOrder = true;
var aTmp = [];
var aBtn = null; //生成数字按钮
for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>"); //插入元素
var oCount = document.createElement("ul");
oCount.className = "count";
oCount.innerHTML = aTmp.join("");
oBox.appendChild(oCount);
aBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li"); //初始化状态
cutover(); //按钮点击切换
for (i = 0; i < aBtn.length; i++)
{
aBtn[i].index = i;
aBtn[i].onmouseover = function ()
{
index = this.index;
cutover()
}
} function cutover()
{
for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
aBtn[index].className = "current";
startMove(-(index * aImg[0].offsetHeight))
} function next()
{
bOrder ? index++ : index--;
index <= 0 && (index = 0, bOrder = true);
index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
cutover()
} playTimer = setInterval(next, 3000); //鼠标移入展示区停止自动播放
oBox.onmouseover = function ()
{
clearInterval(playTimer)
}; //鼠标离开展示区开始自动播放
oBox.onmouseout = function ()
{
playTimer = setInterval(next, 3000)
};
function startMove(iTarget)
{
clearInterval(timer);
timer = setInterval(function ()
{
doMove(iTarget)
}, 30)
}
function doMove (iTarget)
{
var iSpeed = (iTarget - oList.offsetTop) / 10;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"
}
};
</script>
</head>
<body>
<div id="box">
<div class="list">
<ul>
<li><img src="img/01.jpg" width="490" height="170" /></li>
<li><img src="img/02.jpg" width="490" height="170" /></li>
<li><img src="img/03.jpg" width="490" height="170" /></li>
<li><img src="img/04.jpg" width="490" height="170" /></li>
<li><img src="img/05.jpg" width="490" height="170" /></li>
</ul>
</div>
</div>
</body>
</html>
带Loading效果的图片切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带Loading效果的图片切换</title>
<style type="text/css">
body,div,ul,li{margin:0;padding:0;}
li{list-style:none;}
body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;background:#000;}
#big{position:relative;width:800px;height:auto!important;height:400px;min-height:400px;margin:20px auto;text-align:center;}
#title{position:absolute;top:0;left:0;width:100%;background:#000;color:#fff;opacity:0.7;filter:alpha(opacity=70);font-size:20px;height:50px;}
#title span{padding:0 5px;line-height:50px;display:block;}
#big.loading{background:url(img/loading.gif) 50% 50% no-repeat;}
#masks_L,#masks_R{position:absolute;top:0;width:400px;height:100%;cursor:pointer;background:#f0f0f0;opacity:0;filter:alpha(opacity=0);}
#masks_L{left:0;}
#masks_R{right:0;}
#btn_L,#btn_R{position:absolute;top:50%;margin-top:-40px;width:39px;height:80px;overflow:hidden;cursor:pointer;text-indent:-9999px;background:url(img/btn.png) no-repeat;opacity:0;filter:alpha(opacity=0);}
#btn_L{left:10px;background-position:0 0;}
#btn_R{right:10px;background-position:-39px 0;}
</style>
<script type="text/javascript">
function getStyle(obj, attr){return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]}
window.onload = function ()
{
var oBig = document.getElementById("big");
var oMasksL = document.getElementById("masks_L");
var oMasksR = document.getElementById("masks_R");
var oBtnL = document.getElementById("btn_L");
var oBtnR = document.getElementById("btn_R");
var oTitle = document.getElementById("title");
var oSpan = oTitle.getElementsByTagName("span")[0];
var iNow = 0;
var aData = [
{"imgSrc" : "http://img1.gtimg.com/news/pics/hv1/106/238/825/53706421.jpg", "title" : "7月26日，吊车将事故现场的车头残片吊至大型运输车辆上。"},
{"imgSrc" : "http://img1.gtimg.com/news/pics/hv1/105/238/825/53706420.jpg", "title" : "7月26日，一辆大卡车准备驶离事故现场。"},
{"imgSrc" : "http://img1.gtimg.com/news/pics/hv1/101/238/825/53706416.jpg", "title" : "7月26日，工人在给最后一节车厢盖上彩条布，准备运离现场。"},
{"imgSrc" : "http://img1.gtimg.com/news/pics/hv1/99/238/825/53706414.jpg", "title" : "7月26日，一名工人在事故现场最后一节车厢上作业。"},
{"imgSrc" : "http://img1.gtimg.com/news/pics/hv1/100/238/825/53706415.jpg", "title" : "7月26日，工人在给最后一节车厢盖上彩条布，准备运离现场。"}
]; oMasksL.onmouseover = oBtnL.onmouseover = function ()
{
startMove(oBtnL, "opacity", 100)
};
oMasksL.onmouseout = oBtnL.onmouseout = function ()
{
startMove(oBtnL, "opacity", 0)
}; oMasksR.onmouseover = oBtnR.onmouseover = function ()
{
startMove(oBtnR, "opacity", 100)
};
oMasksR.onmouseout = oBtnR.onmouseout = function ()
{
startMove(oBtnR, "opacity", 0)
}; function startMove(obj, attr, iTarget, fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(function ()
{
doMove(obj, attr, iTarget, fnEnd)
}, 30)
} function doMove(obj, attr, iTarget, fnEnd)
{
var iCur = parseFloat(getStyle(obj, attr));
if (attr == "opacity")
{
iCur = parseInt(iCur * 100)
}
var iSpeed = (iTarget - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iTarget == iCur)
{
clearInterval(obj.timer);
fnEnd && fnEnd();
}
else
{
if (attr == "opacity")
{
obj.style.filter = "alpha(opacity = " + (iCur + iSpeed) + ")";
obj.style.opacity = (iCur + iSpeed) / 100;
}
else
{
obj.style[attr] = iCur + iSpeed + "px";
}
}
} oBtnL.onclick = function ()
{ if (iNow <= 0)
{
alert("前面没有图片了！")
return;
}
iNow--;
loadImg();
}; oBtnR.onclick = function ()
{
if(iNow >= aData.length - 1)
{
alert("这是最后一张图片了！")
return;
}
iNow++;
loadImg();
}; loadImg();
function loadImg()
{
oBig.className = "loading";
oSpan.style.opacity = oTitle.style.height = 0;
oSpan.style.filter = "alpha(opacity=0)";
var oImg = oBig.getElementsByTagName("img");
oImg[0] && oBig.removeChild(oImg[0]);
var oTemp = document.createElement("img");
var oNewImg = new Image();
oNewImg.onload = function ()
{
oBig.className = "";
oTemp.src = this.src;
oBig.appendChild(oTemp);
oTemp.style.width = (oTemp.offsetWidth > 800 ? 800 : oTemp.offsetWidth) + "px";
oBig.style.height = oTemp.style.height = oTemp.offsetHeight * oTemp.offsetWidth / oTemp.offsetWidth + "px";
oSpan.innerHTML = aData[iNow].title;
startMove(oTitle, "height", 50, function (){
startMove(oTitle.childNodes[0], "opacity", 100)
})
};
oNewImg.src = aData[iNow].imgSrc
}
};
</script>
</head>
<body>
<div id="big">
<div id="masks_L"></div>
<div id="masks_R"></div>
<div id="btn_L">左</div>
<div id="btn_R">右</div>
<div id="title"><span></span></div>
</div>
</body>
</html>
移动效果（按轨迹移动）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移动效果（按轨迹移动）</title>
<style type="text/css">
body,div{margin:0;padding:0;}
div{position:absolute;width:66px;height:45px;background:url(img/1.gif) no-repeat;top:100px;left:50px;}
p,input{margin:10px;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oDiv = document.getElementsByTagName("div")[0];
var aInput = document.getElementsByTagName("input");
var oP = document.getElementsByTagName("p")[0];
var i = 0; aInput[0].onclick = function (event)
{
(event || window.event).cancelBubble = true;
clearEvent();
this.value += "(已激活)";
oP.innerHTML = "鼠标点击页面， 人物将移动至鼠标位置！";
document.onclick = function (event)
{
var event = event || window.event;
oDiv.style.background = "url(img/2.gif) no-repeat";
startMove(oDiv, {x:event.clientX, y:event.clientY}, function(){oDiv.style.background = "url(img/1.gif) no-repeat"});
return false;
}
}; aInput[1].onclick = function (event)
{
(event || window.event).cancelBubble = true;
clearEvent();
this.value += "(已激活)";
oP.innerHTML = "按住鼠标左键，在页面划动，人物将按照鼠标轨迹移动。"
var aPos = [{x:oDiv.offsetLeft, y:oDiv.offsetTop}];
document.onmousedown = function (event)
{
var event = event || window.event;
aPos.push({x:event.clientX, y:event.clientY});
document.onmousemove = function (event)
{
var event = event || window.event;
aPos.push({x:event.clientX, y:event.clientY});
return false;
}
return false;
}
document.onmouseup = function ()
{
document.onmousemove = null;
oDiv.style.background = "url(img/2.gif) no-repeat";
var timer = setInterval(function ()
{
if(aPos.length == 0)
{
clearInterval(timer);
oDiv.style.background = "url(img/1.gif) no-repeat";
return;
};
oDiv.style.left = aPos[0].x + "px";
oDiv.style.top = aPos[0].y + "px";
aPos.shift();
}, 30);
};
} function clearEvent()
{
document.onclick = null;
document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
for (i = 0; i < aInput.length; i++)
{
aInput[i].value = aInput[i].value.replace("(已激活)", "");
aInput[i].onmousedown = aInput[i].onmouseup = function (event)
{
(event || window.event).cancelBubble = true;
};
}
}
};
function startMove(obj, oTarget, fnEnd)
{
clearInterval(obj.timer);
obj.timer = setInterval(function ()
{
doMove(obj, oTarget, fnEnd)
}, 30)
}
function doMove(obj, oTarget, fnEnd)
{
var iX = (oTarget.x - obj.offsetLeft) / 5;
var iY = (oTarget.y - obj.offsetTop) / 5;
iX = iX > 0 ? Math.ceil(iX) : Math.floor(iX);
iY = iY > 0 ? Math.ceil(iY) : Math.floor(iY);
if (oTarget.x == obj.offsetLeft && oTarget.y == obj.offsetTop)
{
clearInterval(obj.timer);
fnEnd && fnEnd();
}
else
{
obj.style.left = obj.offsetLeft + iX + "px";
obj.style.top = obj.offsetTop + iY + "px";
}
}
</script>
</head>
<body>
<input type="button" value="根据鼠标点击位置移动" /><input type="button" value="根据标鼠标轨迹移动" />
<p>请点击按钮激活功能！</p>
<div></div>
</body>
</html>
自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）的更多相关文章
- setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 通过WindowManager图片切换的效果
最近为这个事情焦头烂额,原因无他.原来打算是把ViewPager放在WindowManager中,再设定一个定时器,让图片自动切换,但是搞了很久,发现无论如何,这个图片只显示一张.虽然日志看得出来图片 ...
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- 利用css3+js实现简单带立体过渡效果的图片切换（chrome浏览器）
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- Android 动画之View动画效果和Activity切换动画效果
View动画效果: 1.>>Tween动画通过对View的内容进行一系列的图形变换(平移.缩放.旋转.透明度变换)实现动画效果,补间动画需要使用<set>节点作为根节点,子节点 ...
- JS图片切换效果
源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- Android 自定义 ViewPager 打造千变万化的图片切换效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主 ...
- 18款 非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
随机推荐
- getElementsByName
name属性,name属性是input标签的内建属性,早期浏览器的getElementsByName方法是为了方便的获取用户的输入.由于name只是input的内建属性,其它标签没有,所以getEle ...
- foj Problem 2282 Wand
Problem 2282 Wand Accept: 432 Submit: 1537Time Limit: 1000 mSec Memory Limit : 262144 KB Prob ...
- 栅栏涂漆(color)
栅栏涂漆测评 题目描述 zed 最近总是受到 Farmer 的困扰,因此他在自家的门前插了一排栅栏以防农气的入侵.栅栏由 N 个竖条栅栏横向组成,每个竖条栅栏宽度为 1.过了一段时间,zed 觉得栅栏 ...
- 杭电oj2072
因为一直不能ac先发这里,希望有看到的大佬能指点一二. 先讲一下我的基本思路,首先将一整行数据保存在数组中,接着遍历数组,根据空格将每个单词存入二维数组中,最后遍历二维数组,找出其中不同的单词并计数. ...
- java 调用可执行文件时,ProcessBuilder异常CreateProcess error=2
java 调用其他应用程序时,可能在windows下没有问题,但是转到linux下,却会报这样那样的错误,比如有设计文件操作会报FileNotFoundException等等(如下代码): Proce ...
- Request的Body只能读取一次解决方法
一.需要一个类继承HttpServletRequestWrapper,该类继承了ServletRequestWrapper并实现了HttpServletRequest, 因此它可作为request在F ...
- openstack token
在openstack的token中,包含如下: 'domain', {'id': None, 'name': None}'expires', datetime.datetime(2017, 8, 9, ...
- hdu 5067(暴力搜索)
Harry And Dig Machine Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- 利用ICSharpCode进行压缩和解压缩
说说我利用ICSharpCode进行压缩和解压缩的一些自己的一下实践过程 1:组件下载地址 参考文章:C#使用ICSharpCode.SharpZipLib.dll压缩文件夹和文件 2: 文件类 // ...
- POJ 3225.Help with Intervals-线段树(成段替换、区间异或、简单hash)
POJ3225.Help with Intervals 这个题就是对区间的各种操作,感觉这道题写的一点意思都没有,写到后面都不想写了,而且更神奇的是,自己的编译器连结果都输不出来,但是交上就过了,也是 ...