之前做的一个项目中，需要实现在同一区域根据后台不同的需求，播放图片轮播后者视频，并且要实现模式转换的实时性，加载的图片和视频资源也要根据数据库实时更新。基本分为三部分：图片轮播的实现，视频的播放，资源和模式的实时更新。
图片轮播：借鉴大神的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() ，会相互影响，理清楚该什么时候打开关闭哪个计时器也就没什么了。