自动播放——幻灯片缓冲效果&&带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>
时间： 2024-10-05 04:27:34

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

setTimeout应用 &amp;&amp; 自动播放——幻灯片效果&amp;&amp; 自动改变方向——幻灯片效果

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

通过WindowManager图片切换的效果

最近为这个事情焦头烂额,原因无他.原来打算是把ViewPager放在WindowManager中,再设定一个定时器,让图片自动切换,但是搞了很久,发现无论如何,这个图片只显示一张.虽然日志看得出来图片确实在切换,但是除了这初始化的这张图片之外,其他的都是黑窗口,也就是没有显示出来. 此路不通,另找出路.其实未必用得着PagerAdapter.安卓就是这点方便,反正View,不管咋整,都是可以往窗口里面放的,我对界面不懂,所以这里也说不出个所以然来.但是这种需求,估计也是有的(比如有些比较恶心的广

图片切换的效果

效果 源码 https://github.com/YouXianMing/Animations // // LiveImageView.h // Animations // // Created by YouXianMing on 15/12/27. // Copyright © 2015年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @interface LiveImageView : UIImageView @p

利用css3+js实现简单带立体过渡效果的图片切换（chrome浏览器）

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>图片立体过渡切换效果</title> <style type="text/css"> *{margin:0;padding:0;} div{width:500px;height:500px;margin:150px au

视频自动播放的几种方法

在网页上添加视频往往不能自动播放,如何实现视频的自动播放这是许多朋友想解决的问题.经过收集和研究,找到几种视频实现自动播放的方法,供大家参考.学习.使用! 视频添加到网页中的通用代码: <EMBED src=视频的SWF地址 width=500 height=400  wmode="transparent" invokeURLs="false" quality="high" allowScriptAccess="never&quo

街机扫描线之为图片添加扫描效果

为图片添加一些额外效果,会使图片更耐看一些,下面来看看如何为一张普通图片添加扫描效果. 首先是下载软件,可到软件主页下载:街机扫描线_v10(正式版) 看一下制作先后的对比图: 原图效果: 制作后加入了扫描效果的效果图: 用街机扫描线制作这种效果图只需简单的几步操作即可完成,貌似用PS做这种效果图也可以做出来,但是会很复杂.下面说一下制作方法. 1.用任意看图软件或浏览器打开一张需要制作扫描效果的图片,也可直接在网页上制作. 2.下载 街机扫描线 之后解压到任意目录,运行 街机扫描线_v10(正

图片切换特效（1）：原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!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">

JS图片切换效果

源地址:http://www.codefans.net/jscss/code/4699.shtml <!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"&g

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa