ゞ╃漃瘼青賰
——我用青春换未来！我比别人笨，但是我比别人努力！
javascript五图轮播切换---实用版

今天发表一个自己刚学js的练习，javascript五图轮播切换---实用版，这个实力有个缺陷就是没有过渡效果，这个本人也还在研究中，也希望高手可以指点一下！

<!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=gbk">
<title>测试</title>
<meta name="author" content="ximan">
<meta name="keywords" content="">
<meta name="description" content="">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div class="content">
    <ul id="num">
        <li style="background: #f00;">
            1
        </li>
        <li>
            2
        </li>
        <li>
            3
        </li>
        <li>
            4
        </li>
        <li>
            5
        </li>
    </ul>
    <ul id="img_box">
        <li>
            <a href="#">
                <img src="pailabi_shop1.jpg" alt="哈哈哈" />
            </a>
        </li>
        <li>
            <a href="#">
                <img src="pailabi_shop2.jpg" alt="哈哈哈" />
            </a>
        </li>
        <li>
            <a href="#">
                <img src="paila_shop3.jpg" alt="哈哈哈" />
            </a>
        </li>
        <li>
            <a href="#">
                <img src="paila_shop4.jpg" alt="哈哈哈" />
            </a>
        </li>
        <li>
            <a href="#">
                <img src="paila_shop5.jpg" alt="哈哈哈" />
            </a>
        </li>
    </ul>
</div>
<script type="text/javascript">
</script>
<script type="text/javascript">
    window.onload=function (){
        var num = document.getElementById("num");
        var num_li = document.getElementById("num").getElementsByTagName("li");
        var img_box = document.getElementById("img_box");
        var img_box_li = document.getElementById("img_box").getElementsByTagName("li");
        var bliw = img_box_li[0].offsetWidth;
        var n = 0;
        img_box.style.left = 0
        var autoscroll = setInterval(auto,3000);
        for (var i = 0;i < num_li.length;i++){
            num_li[i].onmouseover = function(){
                clearInterval(autoscroll);
                for (var i = 0;i < num_li.length;i++){
                    num_li[i].style.background = "";
                    if(num_li[i]==this){
                        this.style.background = "#f00";
                        slide(i);
                    }
                }
            }
            num_li[i].onmouseout = function(){
                for (var i = 0;i < num_li.length;i++){
                    if(num_li[i]==this){
                        n = i;
                        autoscroll = setInterval(auto,3000)
                    }
                }
            }
        }
        function slide(i){
            img_box.style.left = -bliw*i + "px";
        }
        function auto(){
            n++;
            if(n == img_box_li.length){
                n =0;
            }
            for (var i =0;i < num_li.length;i++){
                num_li[i].style.background = "";
            }
            num_li[n].style.background = "#f00";
            slide(n);
        }
    }
</script>
</body>
</html>

 

 

posted on 2012-08-17 09:43  ゞ╃漃瘼青賰  阅读(560)  评论(0)  编辑  收藏  举报

Copyright © 2024 ゞ╃漃瘼青賰
Powered by .NET 9.0 on Kubernetes Powered By博客园