<!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>
