这哪是什么切换,“换一批”这样的功能,是从数据库后台随机抓取一些数据出来替换掉当前的内容而已。要替换还不简单啊,还什么隐藏切换,要是有100条信息呢,难道你要写100个div窗口切换吗?
所以一般是用JS在后台用ajax技术获取到新闻热点内容,然后用for循环,或者用jquery的each循环替换掉用来的新闻标题就可以了。比如:
*************************************************************
根据你的截图,上面每次换一批就是显示6个热点标题,每两个热点标题作为一行,假设如上面代码,以id="windowsdiv"为显示的窗口,当用户点击“换一批”时,就会触发点击事件,如:
//我用js大致写一下思路:
function huanyipi(){
var strs = getData(); //启动一条ajax线程从后台获取出随机新闻标题,并且封装成你想要处理的类型。比如,要是我,我喜欢获取了六条热点新闻后封装返回的结果是:【热点1,热点2...热点六】,用“,”号隔开;
var strarr = strs.split(","); //把字符串根据逗号拆分出来放进数组中
var ulhtml = ""
for(var i=0; i < strarr.length,i++){
if(i == 0){
ulhtml = "
- "+strarr[i]+"
";
}else if( i % 2 == 0){ //每两个标题为一行
ulhtml = ulhtml + “
- ”+strarr[i]+"
";
}else {
ulhtml = ulhtml + "- "+strarr[i]+"
";
}
}
if(ulhtml != ""){
ulhtml = ulhtml +"
"; //加上最后的结束ul标记
}
//最后把窗口的内容全部重新覆盖掉就可以了,用jquery最快。
$("#windowsdiv").html(ulhtml );
}
function getData(){
var strs = "";
// 接下来自己用$(ajax)技术去获取数据吧;
//....
//接着返回结果(如果只是为了测试,那就不要用ajax,自己随便写六个标题返回)
return strs;
}
//这样做的好处就是,把数据内容交给后台处理,你可以设置它从什么时候开始又重新从第一页开始显示都可以。前端只是负责做数据显示而已,至于数据怎么获取、是否随机,你们可以自己决定