通过url发送的json内容，转换为新闻图片切换控件

最新推荐文章于 2024-05-19 20:58:55 发布

goto0917

最新推荐文章于 2024-05-19 20:58:55 发布

阅读量180

点赞数

分类专栏： jquery 文章标签： json java javascript ViewUI

本文链接：https://blog.csdn.net/goto0917/article/details/84690169

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近需要做一个通过第三方系统url返回的json内容，展示位门户首页新闻图片轮播的控件，整理代码如下，备查



import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.util.JSONTokener;

//省略

 @ResponseBody
	@RequestMapping(params = "method=initpic")
	public String initpic(HttpServletRequest request, HttpServletResponse response) {
    	final String NULL_IMAGE_PATH = "http://www.baidu.com/img/bd_logo1.png";
    	String result="";
    	StringBuffer html = new StringBuffer();
    	BufferedReader reader = null;
		try{
			String orgurl = request.getParameter("url");
			URL connect = new URL(orgurl.toString());
			URLConnection connection = connect.openConnection();
			connection.connect();
			reader = new BufferedReader(new InputStreamReader(connection.getInputStream(),"UTF-8"));
			String line;//循环读取
             while ((line = reader.readLine()) != null) {
                 result += line;
             }
        if(!result.equals("")){
        	JsonConfig jsonConfig = new JsonConfig();
			Map<String, Class> classMap = new HashMap<String, Class>();
			classMap.put("result", String.class);
			classMap.put("Page", Integer.class);
			classMap.put("Pages", Integer.class);
			classMap.put("Total", Integer.class);
			classMap.put("Pagesize", Integer.class);
			classMap.put("Items", HashMap.class);
			jsonConfig.setClassMap(classMap);
			jsonConfig.setRootClass(HashMap.class);
			JSONTokener jt = new JSONTokener(result);
			Object obj = jt.nextValue(jsonConfig);
			JSONObject ja = JSONObject.fromObject(obj);
			Map<String, List<Map>> map = (Map<String, List<Map>>) JSONObject.toBean(ja, jsonConfig);
			List itemlist = map.get("Items");
			html.append("<div style=\"width:500px;margin:0px auto;\">")
			.append("<div class=\"roll-news-keleyi-com\">").append("<div class=\"roll-news-image\">");
			for (int i = 0; i < itemlist.size(); i++) {
				Map<String,Object> imgmap = (Map<String, Object>) itemlist.get(i);
				html.append("<img src=\"");
				if(imgmap.get("thumb")!=null && !"".equals(imgmap.get("thumb").toString())){
					html.append(imgmap.get("thumb"));
				}else{
					html.append(NULL_IMAGE_PATH);
				}
				if(i!=0){
					html.append("\" style=\"display:none\" >");
				}else{
					html.append("\">");
				}
			}
			html.append("</div>");
			html.append("<div class=\"roll-news-index\">");
			html.append("<ul>");
			for (int i = 0; i < itemlist.size(); i++) {
				html.append("<li");
				if(i == 0){
					html.append(" class=\"roll-news-index-hover\"");
				}
				html.append(">").append(i+1).append("</li>");
			}
			html.append("</ul>");
			html.append("</div>");
			html.append("<div class=\"roll-news-title\">");
			for (int i = 0; i < itemlist.size(); i++) {
				Map<String,Object> imgmap = (Map<String, Object>) itemlist.get(i);
				html.append("<a href=\"").append(imgmap.get("thumb"));
				html.append("\" ");
				if(i!=0){
					html.append("style=\"display:none\"");
				}
				html.append(" >");
				html.append(imgmap.get("title"));
				html.append("</a>");
			}
			html.append("</div></div></div>");
			System.out.println(html.toString());
        }    

		}catch(Exception e){
			e.printStackTrace();
		}finally{
    	    if(reader!=null){//关闭流
       	     try {
       	      reader.close();
       	     } catch (IOException e) {
       	      e.printStackTrace();
       	     }
       	    }
       	   }
		 return html.toString();
}

页面


<%@page import="java.util.ListResourceBundle"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<HEAD>
<TITLE> </TITLE>
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="res/js/json2.js" type="text/javascript" charset="UTF-8"></script>
<script src="res/js/jquery-1.8.0.min.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css"> 
* { 
padding:0px; 
margin:0px; 
} 
.roll-news-keleyi-com { 
width:480px; 
height:300px; 
border:solid 1px #c1c1c1; 
} 
.roll-news-index-hover { 
background-color:white; 
} 
.roll-news-image img { 
width:480px; 
height:300px; 
} 
.roll-news-index { 
position:relative; 
top:-50px; 
margin-right:5px; 
float:right; 
} 
.roll-news-index { 
} 
.roll-news-index li { 
list-style:none; 
float:left; 
font-size:12px; 
font-weight:600; 
width:18px; 
height:16px; 
line-height:16px; 
cursor:pointer; 
margin:0 3px; 
background-image:url(opacity_50.png); 
text-align:center; 
} 
.roll-news-title { 
position:relative; 
top:-25px; 
padding-left:10px; 
height:22px; 
line-height:20px; 
background:url(opacity_50.png); 
} 
.roll-news-title a { 
font-size:12px; 
text-decoration:none; 
color:white;
background-color:gray 
} 
.roll-news-title a:hover { 
color:red; 
} 
</style> 
</HEAD>
<body>
<div id="imgdiv">
</div>
</body>


<script type="text/javascript">
$(document).ready(function () {
	$.ajax({
		type : "post",
		url : "login.go?method=initpic&url=http://www.xinhuamed.com.cn/getnews.aspx?action=list&page=1&pagesize=10",
		contentType : "application/text; charset=utf-8",
		success : function(data) {
			document.getElementById("imgdiv").innerHTML=data;
		},
		error : function(msg) {

		}
	}); 

	 setTimeout(function(){
		 var index = 0;
			var slideFlag = true;
			var length = $(".roll-news-image img").length;

			function showImg(i) {
			$(".roll-news-image img")
			.eq(i).stop(true, true).fadeIn(800)
			.siblings("img").hide();

			$(".roll-news-index li").removeClass("roll-news-index-hover");
			$(".roll-news-index li").eq(i).addClass("roll-news-index-hover");

			$(".roll-news-title a")
			.eq(i).stop(true, true).fadeIn(800)
			.siblings("a").hide();
			}
			showImg(index);

			$(".roll-news-index li").click(function () {
			index = $(".roll-news-index li").index(this);
			showImg(index);
			slideFlag = false;
			});

			function autoSlide() {
			setInterval(function () {
			if (slideFlag) {
			showImg((index + 1) % length);
			index = (index + 1) % length;
			}
			slideFlag = true;
			}, 3000);
			}

			autoSlide();                           
     },500);
}); 

</script> 

</html>

goto0917

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过url发送的json内容，转换为新闻图片切换控件

最近需要做一个通过第三方系统url返回的json内容，展示位门户首页新闻图片轮播的控件，整理代码如下，备查[code="java"]import net.sf.json.JSONObject;import net.sf.json.JsonConfig;import net.sf.json.util.JSONTokener;//省略 @ResponseBody...
复制链接

扫一扫