自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果（按轨迹移动）

浏览数：29 / 时间：2015年06月11日

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