当前位置: 代码迷 >> JavaScript >> 召集大家帮小弟我完成一个JS有关问题
  详细解决方案

召集大家帮小弟我完成一个JS有关问题

热度:98   发布时间:2012-03-17 19:06:28.0
召集大家帮我完成一个JS问题
谢谢大家 麻烦大家点击这个链接地址 
http://www.cnblogs.com/blueSkys/archive/2011/09/28/2194420.html  
博客园的

看看有啥解决办法。。。 期待JS达人。。谢谢



------解决方案--------------------
新手浅见 我觉得用<marquee>标签+css会更简单点
------解决方案--------------------
把你代码拷下来 跑都跑不起 纠结, 这分跟我无缘, 闪之。。。!
------解决方案--------------------
obj:null,
obj_child1:null,
obj_child2:null,
time_id : null,
这些没有闭包,有冲突吧。
------解决方案--------------------
按LZ现在的结构,没有new 一个实例。

那么slide 永远都只是一个一般的对象,当第一次slide(xxxx)的时候,slide就是他自己,当再次slide(xxx)的时候,之前的slide 将会被新的slide对象覆盖。没有实例化啊
------解决方案--------------------
JScript code
var slide = function(div_id,scro_direction,speed,width,height){
    return new slide.prototype.init(div_id,scro_direction,speed,width,height);
}
slide.prototype = {
    init:function(div_id,scro_direction,speed,width,height){
        
    },
    .....
}
slide.prototype.init.prototype = slide.prototype;

------解决方案--------------------
问题不大
1、示例的 html 中两个 id 重名,而实际控制时 id 必须唯一
2、需用数组保存实例的id,以便于定时控制
------解决方案--------------------
实际上仔细观察你会发现
JScript code

        window.onload = function () {
            slide.init('con', 'top', 30, '200px', '200px');
            slide.init('coe','top',30,'200px','200px');
        }

------解决方案--------------------
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>img_slide</title>
    <script type="text/javascript" src="javascripts/slide.js"></script>
    <script type="text/javascript">
        /**
         * @author jiashu
         */

        var slide = {
            div_id:null,
            obj:null,
            obj_child1:null,
            obj_child2:null,
            time_id:null,
            //div_id 住容器的ID scro_direction 图片滚动方向 speed 滚动速度
            init:function (div_id, scro_direction, speed, width, height) {
                if (document.getElementById(div_id) == null) {
                    return false;
                }

                var container = document.getElementById(div_id);//
                slide.div_id = div_id;
                var inner_html = container.innerHTML;
                container.innerHTML = "";

                var container_c1 = this.create_container("div", div_id + "1", inner_html);
                this.obj_child1 = div_id + "1";//对第一个字容器进行处理


                var container_c2 = this.create_container("div", div_id + "2", inner_html);
                this.obj_child2 = div_id + "2";//对第二个子容器处理

                container.appendChild(container_c1);
                container.appendChild(container_c2);
                container.style.overflow = "hidden";
                container.style.width = width;
                container.style.height = height;

                container.scro_direction = scro_direction;
                container.speed = speed;

                this.start.call(container);
                container.onmouseout = slide.start;
                container.onmouseover = slide.stop;
            },
            stop:function () {
                clearInterval(slide.time_id);
            },
            start:function () {
                var con = slide.obj = this;
                slide.time_id = setInterval("slide.top_do(" + (slide.div_id + '1') + "," + (slide.div_id + '2') + "," + slide.div_id + ")", con.speed);
            },
            top_do:function (id1, id2, id) {
                if (id2.offsetTop - id.scrollTop <= 0) {
                    id.scrollTop -= id1.offsetHeight;
                }
                else {
                    id.scrollTop++;
                }
            },
            create_container:function (type, id, innerHTML) {
                var new_container = document.createElement(type);
                new_container.id = id;
                new_container.innerHTML = innerHTML;
                return new_container;
            }
        }
        window.onload = function () {
            slide.init('con', 'top', 30, '200px', '200px');
            slide.init('coe','top',30,'200px','200px');
        }
    </script>
</head>
<body>
<h1>New Web Project Page</h1>

<div id="con">
    <p><img src="images/enemy.png"></p>

    <p><img src="images/player.png"></p>

    <p><img src="images/enemy.png"></p>

    <p><img src="images/player.png"></p>

    <p><img src="images/enemy.png"></p>

    <p><img src="images/player.png"></p>

    <p><img src="images/enemy.png"></p>

    <p><img src="images/player.png"></p>

    <p><img src="images/enemy.png"></p>
</div>

<div id="coe">
    <p><img src="images/enemy.png"></p>

    <p><img src="images/player.png"></p>

    <p><img src="images/enemy.png"></p>

    <p><img src="images/player.png"></p>

    <p><img src="images/enemy.png"></p>

    <p><img src="images/player.png"></p>

    <p><img src="images/enemy.png"></p>

    <p><img src="images/player.png"></p>

    <p><img src="images/enemy.png"></p>
</div>
</body>
</html> 
  相关解决方案