码迷,mamicode.com
首页 > 其他好文 > 详细

最简单的图片轮播

时间:2014-10-10 13:30:24      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:blog   http   io   ar   java   for   sp   art   on   

<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">
    var arr = new Array;
    arr[0] = "../images/slide-01.jpg";
    arr[1] = "../images/slide-02.jpg";
    arr[2] = "../images/slide-03.jpg";
    var Timer = setInterval(play, 1000);
    var count = 1;
    function play() {
        if (arr.length == count)
            count = 0;
        document.getElementById("pic").src = arr[count];
        count++;
    }
    function clearTimer() {
        clearInterval(Timer);
    }

    function onMouseOver(obj) {
        clearTimer();
        var index = parseInt(obj.value);
        document.getElementById("pic").src = arr[index - 1];
        count = index;
    }
    function btnMouseOut() {
        Timer = setInterval(play, 1000);
    }
    function init() {
        var btns = document.getElementsByTagName("input");
        for (var i = 0; i < btns.length; i++) {
            btns[i].onmouseout = btnMouseOut;
        }
    }  
</script>  
</head>  
<body onload="init()">  
<img id="pic" src="../images/slide-01.jpg" width="600" height="315" /><br />  
<input type="button" value="1" id="1" onmouseover="onMouseOver(this)"/>  
<input type="button" value="2" id="2" onmouseover="onMouseOver(this)" />  
<input type="button" value="3" id="3" onmouseover="onMouseOver(this)" />  

</body>  
</html> 

转载原文:http://blog.csdn.net/wjr_loves/article/details/7865537

 

最简单的图片轮播

标签:blog   http   io   ar   java   for   sp   art   on   

原文地址:http://www.cnblogs.com/lizihong/p/4015444.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!