九宫格轮播效果js代码该怎么写

bo21722777

九宫格抽奖轮播效果js代码该怎么写，怎么跟web网页版的js代码不一样，求大神指点代码实现效果

liangyongfei

可以尝试使用 carousel组件 实现轮播效果
参考其他轮播的demo   在content中设置多个9宫格页面

bo21722777

九宫格前端页面已经整理好了，就是js代码该怎么插入，能指导一下我写的这段代码该怎么插入应用吗，功能是全的‘以下是代码，
define(function(require){
        var $ = require("jquery");
        var justep = require("$UI/system/lib/justep");

        var Model = function(){
                this.callParent();
        };
  <script src="js/jquery.min.js"></script>
  <script>
        var luck={
                index:0,        //当前转动到哪个位置，起点位置
                count:0,        //总共有多少个位置
                timer:0,        //setTimeout的ID，用clearTimeout清除
                speed:20,        //初始转动速度
                times:0,        //转动次数
                cycle:50,        //转动基本次数：即至少需要转动多少次再进入抽奖环节
                prize:-1,        //中奖位置
                init:function(id){
                        if ($("#"+id).find(".luck-unit").length>0) {
                                $luck = $("#"+id);
                                $units = $luck.find(".luck-unit");
                                this.obj = $luck;
                                this.count = $units.length;
                                $luck.find(".luck-unit-"+this.index).addClass("active");
                        };
                },
               
                roll:function(){
                        var index = this.index;
                        var count = this.count;
                        var luck = this.obj;
                        $(luck).find(".luck-unit-"+index).removeClass("active");
                        index += 1;
                        if (index>count-1) {
                                index = 0;
                        };
                        $(luck).find(".luck-unit-"+index).addClass("active");
                        this.index=index;
                        return false;
                },
                stop:function(index){
                        this.prize=index;
                        return false;
                }
        };


        function roll(){
                luck.times += 1;
                luck.roll();
                if (luck.times > luck.cycle+10 && luck.prize==luck.index) {
                        clearTimeout(luck.timer);
                        luck.prize=-1;
                        luck.times=0;
                        click=false;
                }else{
                        if (luck.times<luck.cycle) {
                                luck.speed -= 10;
                        }else if(luck.times==luck.cycle) {
                                var index = Math.random()*(luck.count)|0;
                                if(index>5){
                                        index = 7;
                                }else {
                                        index = 5;
                                }
                                luck.prize = index;//最终中奖位置
                        }else{
                                if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) {
                                        luck.speed += 110;
                                }else{
                                        luck.speed += 20;
                                }
                        }
                        if (luck.speed<40) {
                                luck.speed=40;
                        };

                        luck.timer = setTimeout(roll,luck.speed);
                }
                return false;
        }


        var click=false;
        window.onload=function(){
                luck.init('luck');
                $("#btn").click(function(){
                        /*//按下弹起效果
                        $("#btn").addClass("cjBtnDom");
                        setTimeout(function(){       
                                $("#btn").removeClass("cjBtnDom");
                        },200);*/

                       
                        if(click) {
                                return false;
                        }
                        else{
                                luck.speed=100;
                                roll();
                                click=true;
                                return false;
                        }

                });
        };
        //播报
        var demo = document.getElementById("demo");
        var demo1 = document.getElementById("demo1");
        var demo2 = document.getElementById("demo2");
        demo2.innerHTML=document.getElementById("demo1").innerHTML;
        function Marquee(){
                if(demo.scrollLeft-demo2.offsetWidth>=0){
                        demo.scrollLeft-=demo1.offsetWidth;
                }
                else{
                        demo.scrollLeft++;
                }
        }
        setInterval(Marquee,10);

</script>
        return Model;
});’

bo21722777

我现在写的九宫格运行起来应该像跑马灯这样的样子，现在写的js代码不会插入

liangyongfei

bo21722777 发表于 2018-7-5 15:09
我现在写的九宫格运行起来应该像跑马灯这样的样子，现在写的js代码不会插入 ...

http://doc.wex5.com/js-module-01/
js代码的引入和调用，建议支持amd规范

你是用的第三方 控件实现的吗？？

其实九宫格做法可以参考
http://docs.wex5.com/wex5-ui-question-list-2121/

bo21722777

请问外部引用js代码，是不是能在当前项目中新建js文件，文件当中仅仅存放js功能代码就可以？还有路径直接填写http加当前文件路径就 可以？

liangyongfei

bo21722777 发表于 2018-7-6 10:41
请问外部引用js代码，是不是能在当前项目中新建js文件，文件当中仅仅存放js功能代码就可以？还有路径直接填 ...

都可以的！ 可以是本地js 也可以引用网络js

bo21722777

请问这个就九宫格js代码是用原生js代码还是jq？

bo21722777

您给的网址建议我去看过，调用外部js，但功能还是无法实现，提示是js页错误，但把js页代码拿到web网页版就好用，是需要在wex5中添加什么事件还是需要修改什么js代码，跪求指点

jishuang

简单的可以直接用html页面实现，然后用iframe集成html页面展现