问下用定时器让图片不间断向上滚动

<!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>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".img_list li:nth-child(1)").show();
function changImg(){
var times = 1;
$(".img_list li:nth-child(times)").slideUp();
$(".img_list li:nth-child(times+1)").slideDown();
times++;
}
window.setInterval(function(){changImg()},1500);
})
</script>
</head>
<style type="text/css">
*{ margin:0px; padding:0px}
body{ text-align:center}
img{ border:0}
#img_lunbo{ width:1000px; height:300px; overflow:hidden; position:relative;}
#img_lunbo .img_list{ width:1000px; height:300px}
#img_lunbo .img_list li{ list-style:none; width:1000px; height:300px;}
#img_lunbo .num{ position:absolute; bottom:20px; right:20px}
#img_lunbo .num li{ width:14px; height:14px; float:left; list-style:none; display:block; line-height:14px; text-align:center; background:#FFF; border:1px solid #F00; cursor:pointer; margin-left:5px}
#img_lunbo .num .active{ background:#F00; color:#FFF}
</style>
<body>
<div id="img_lunbo">
    <div class="img_list">
        <ul>
            <li style="display:none"><a href="#"><img src="images/1.jpg" width="1000" height="300" /></a></li>
            <li style="display:none"><a href="#"><img src="images/2.jpg" width="1000" height="300" /></a></li>
            <li style="display:none"><a href="#"><img src="images/3.jpg" width="1000" height="300" /></a></li>
        </ul>
    </div>
    <div class="num">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>
</body>
</html>
function

解决方案 »

  1.   


    <!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>test</title>
    <style type="text/css">
    *{ margin:0px; padding:0px}
    body{ text-align:center}
    img{ border:0}
    #img_lunbo{ width:1000px; height:300px; overflow:hidden; position:relative;}
    #img_lunbo .img_list{ width:1000px; height:300px;overflow:hidden}
    #img_lunbo .img_list li{ list-style:none; width:1000px; height:300px;}
    #img_lunbo .num{ position:absolute; bottom:20px; right:20px}
    #img_lunbo .num li{ width:14px; height:14px; float:left; list-style:none; display:block; line-height:14px; text-align:center; background:#FFF; border:1px solid #F00; cursor:pointer; margin-left:5px}
    #img_lunbo .num .active{ background:#F00; color:#FFF}
    </style>
    </head>
    <body>
    <div id="img_lunbo">
        <div id="imgPanel" class="img_list">
            <div id="imgPanel1">
                <ul>
                    <li><a href="#"><img src="images/1.jpg"/></a></li>
                    <li><a href="#"><img src="images/2.jpg"/></a></li>
                    <li><a href="#"><img src="images/3.jpg"/></a></li>
                </ul>
            </div>
            <div id="imgPanel2"></div>
        </div>
        <div id="num" class="num">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
        <script type="text/javascript">
            (function () {
                var imgPanel = document.getElementById("imgPanel");
                var imgPanel1 = document.getElementById("imgPanel1");
                var imgPanel2 = document.getElementById("imgPanel2");
                var aArr = document.getElementById("num").getElementsByTagName("ul")[0].getElementsByTagName("li");
                
                imgPanel2.innerHTML = imgPanel1.innerHTML;
                
                var maxHeight = imgPanel.offsetHeight,
                    speed = 3000,
                    timer,
                    index = 0;
                function marquee() {
                    if (imgPanel2.offsetTop - imgPanel.scrollTop <= 0) {
                        imgPanel.scrollTop -= imgPanel1.offsetHeight;
                    } else {
                        imgPanel.scrollTop += 3;
                        maxHeight -= 3;
                        if (maxHeight <= 0) {
                            clearInterval(timer);
                            begin();
                        }
                    }
                }
                function changePage() {                
                    aArr[index].className = "";
                    index = ++index % aArr.length;
                    aArr[index].className = "active";
                }
                function begin() {
                    setTimeout(function () {
                        maxHeight = imgPanel.offsetHeight;
                        timer = setInterval(marquee, 2)//设置定时器
                        changePage();
                    }, speed);
                };
                begin();
            })();
        </script>
    </body>
    </html>