图片轮播+无闪动实时刷新

      之前做的一个项目中，需要实现在同一区域根据后台不同的需求，播放图片轮播后者视频，并且要实现模式转换的实时性，加载的图片和视频资源也要根据数据库实时更新。基本分为三部分：图片轮播的实现，视频的播放，资源和模式的实时更新。

        图片轮播：借鉴大神的js实现图片轮播功能，效果如下：具体代码参见原生js实现图片轮播

        

        这里遇到的问题是，项目中同一个界面其实加载了两个图片轮播的模块，一个显示另个隐藏，两个计时器不能同时计时，一个setInterval()，另一个必须clearInterval()，否则播放顺序会混乱。

         视频播放：这个很简单，利用<video>、<object>、<embed>标签就可以实现，具体可见视频，效果：

         

        还有就是实时更新的问题，当后台添加不同的资源，转换不同的模式时，界面显示要在不闪动的情况下实时刷新某个<div>标签下的内容。也是利用setInterval()和js实现的，了解setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。具体代码：

        加载资源：

<span style="font-size:18px;">function startPictureRequest() {
            $.ajax({
                type: "POST",
                dataType: "Json",
                url: "ashx/picture.ashx?IP=<%=ip%>",
                success: function (msg) {
                    var picInfo = msg.str1.toString() + msg.str2.toString() + msg.str3.toString();
                    var picInfoShow = $("#txtStrAll").val();
                    //数据库中的数据与界面上显示的不同则重新加载
                    if (picInfo != picInfoShow) {
                        document.getElementById('txtStrAll').value = picInfo;
                        $(".count").empty();
                        $("#wwr1").empty();
                        $(".count").append(msg.str2.toString());
                        $("#wwr1").append(msg.str3.toString() + msg.str1.toString() + "</ul>");
                        clearInterval(play);
                        picture();
                    }
                },
                error: function (errorThrown) {
                    alert("展示有错误，请联系管理员！");
                }
            });</span>

        利用setInterval()，每个几秒刷新资源和模式，加载到<div>下，如果资源和模式没有变化则不变化：

<span style="font-size:18px;">$(document).ready(function () {
            setInterval("changeModel()", 3000);
        });
        function changeModel() {
            $.ajax({
                type: "post",
                url: "ashx/changeModel.ashx?IP=<%=ip%>",
                dataType: "Json",
                success: function (msg) {
                    var modelDivID = msg.modelID.toString();
                    var changeMode = $("#txtchangeMode").val();
                    //图片轮播模式
                    if (modelDivID == "SM") {
                        startPictureModeRequest();
                    }
                    //综合模式
                    if (modelDivID == "CM") {
                        startPictureRequest();
                    }
                    if (changeMode != modelDivID) {
                        //将当前模式保存在界面上
                        document.getElementById('txtchangeMode').value = modelDivID;
                        //班级风采模式
                        if (modelDivID == "SM") {
                            //先把自己的计时器关闭
                            clearInterval(playMode);
                            pictureMode();
                            $("#SM").css({ "display": "" });
                            $("#CM").css({ "display": "none" });
                            $("#EM").css({ "display": "none" });
                        }
                        //综合模式
                        if (modelDivID == "CM") {
                            clearInterval(play);
                            picture();
                            $("#CM").css({ "display": "" });
                            $("#SM").css({ "display": "none" });
                            $("#EM").css({ "display": "none" });
                            //先把自己的计时器关闭
                        }
                        //考试模式
                        if (modelDivID == "EM") {
                            $("#EM").css({ "display": "" });
                            $("#CM").css({ "display": "none" });
                            $("#SM").css({ "display": "none" });
                        }

                    }
                }
            });</span>

        其实基本逻辑不能，过程中主要问题就是这里存在多个setInterval() ，会相互影响，理清楚该什么时候打开关闭哪个计时器也就没什么了。