发新贴  快速回复

定时器图片自动切换

雨后依然
2014-08-25 16:53
定时器里的图片自动切换的练习没有思路?求助?
 
刘宝成
定时器控制变量,图片的路径中唯一变的就是变量。 比如num++;    oImg.src = arrSrc[num];    这样num自增一次,图片就换一次。
2014-08-25 22:29  回复本帖
雨后依然
你做第九节的练习了,里面有个关于定时器的自动切换的练习,我说的是那个练习,想了好久,没有思路,
2014-08-26 10:39  回复本帖
gts1334
这个很简单~思路就是li升上去之后~~图片移动之后~~全部li初始高度~~最后把第一个图片放回最后
2014-08-27 15:20  回复本帖
 
刘宝成
第九课的,貌似我这个就是,发给你附件,你看看。
2014-08-29 15:02  回复本帖
雨后依然
不是很懂,请指教
2014-08-29 15:46  回复本帖
gts1334
<!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>
</head>

<style>
*{margin:0;padding:0;list-style:none; font-family:"微软雅黑"}
.box{width:448px;height:245px; position:relative;margin:20px auto 0;border:1px solid #ccc; overflow:hidden;}
.box a{width:30px;height:50px;opacity: 0.5;filter:alpha(opacity=50);background:black;display:block; position:absolute;top:80px;z-index:5; text-decoration:none;text-align:center;line-height:50px;color:white;font-size:16px;font-weight:bold;}
.box a:hover{opacity: 1;filter:alpha(opacity=100)}
.contest{position:absolute;left:0}
.contest ul{ float:left;}
.contest li{ width:448px;height:30px;background:#000;filter:alpha(opacity=50);opacity: 0.5;position:absolute;z-index:2;top:245px;color:white;line-height:30px; text-indent:24px;}
#prev{left:0px;}
#next{right:0px;}
.nav{height:10px; position:absolute; right:10px; bottom:10px;z-index:6;}
.nav li{width:10px;height:10px;float:left; border-radius:50%;background:#CCC;margin-left:5px;}
.nav .action{background:#F90;}
</style>

<script src="myjs.js"></script>

<script>
window.err= = function(){
    var oDiv = document.getElementById('contest');
    var aUl = oDiv.getElementsByTagName('ul');
    var aLi = oDiv.getElementsByTagName('li');
    var aImg = oDiv.getElementsByTagName('img');
    var iLen = aUl.length;
    
    oDiv.style.width = iLen*448+'px';
    
    function amt(){
        doMove(aLi[0],'top',10,215,function (){
            setTimeout(function (){
                doMove(aLi[0],'top',10,215,function (){
                    doMove(oDiv,'left',10,-448,function(){
                        for(var i=0;i<iLen;i++){
                            aLi[i].style.top = 245+'px';
                        }
                        oDiv.appendChild(aUl[0]);
                        oDiv.style.left = 0+'px';
                        amt();
                    });
                });
            },1500);
        });
    };
    amt();
}
</script>
<body>



<br />
<br />
<div class="box">
    <div class="contest" id="contest">
        <ul>
            <img src="imgs/1-1.png" width="448" height="245">
            <li>对于免职原因1</li>
        </ul>
        <ul>
            <img src="imgs/1-2.png" width="448" height="245">
            <li>对于免职原因2</li>
        </ul>
        <ul>
            <img src="imgs/1-3.png" width="448" height="245">
            <li>对于免职原因3</li>
        </ul>
        <ul>
            <img src="imgs/1-4.png" width="448" height="245">
            <li>对于免职原因4</li>
        </ul>
    </div>
</div>

</body>
</html>
2014-08-29 17:48  回复本帖
雨后依然
谢谢,thank you,oDiv.appendChild(aUl[0]);这句话,起得是什么作用呢?可以不用这个appendChild这个函数做出来 么?
2014-09-01 10:52  回复本帖
 
李丽丽001
forum.php?mod=redirect&goto=findpost&pid=29670&ptid=9151
无标题文档




你好,看了你的代码,有些地方没看明白:amt()函数中的aLi[0]上去之后,回调中为什么还是从aLi[0] 开始呢?
oDiv.appendChild(aUl[0]); 还有这句是起什么作用?

function amt(){
        doMove(aLi[0],'top',10,215,function (){
            setTimeout(function (){
                doMove(aLi[0],'top',10,215,function (){
                    doMove(oDiv,'left',10,-448,function(){
                        for(var i=0;i<iLen;i++){
                            aLi[i].style.top = 245+'px';
                        }
                        oDiv.appendChild(aUl[0]);
                        oDiv.style.left = 0+'px';
                        amt();
                    });
                });
            },1500);
        });
    };


2014-11-13 10:25  回复本帖
 
李丽丽001
forum.php?mod=redirect&goto=findpost&pid=32095&ptid=9151
你好,看了你的代码,有些地方没看明白:amt()函数中的aLi[0]上去之后,回调中为什么还是从aLi[0] 开始呢 ...

终于看懂了一些,--amt()函数中的aLi[0]上去之后,回调中为什么还是从aLi[0] 开始呢?
其实这句下面(红色字体的)是起一个过渡,aLi[0]的位置没有变化,那么基本不花时间,这是为下面的全部初始化li做的铺垫

--oDiv.appendChild(aUl[0]); 还有这句是起什么作用?
appendChild() 原理是剪切


利用回调的方式来实现无缝滚动


[list=1]
[*]doMove(aLi[0],'top',10,215,function (){
[*]                        setTimeout(function (){
[*]                                doMove(aLi[0],'top',10,215,function (){
[/list]

2014-11-13 10:52  回复本帖
登录 后才可以发表回复