您的位置：首页 > Web前端 > JavaScript

js解析json的html页面实现简单js特效

2013-06-25 17:57 1026 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

var tide_photos ={"items":['2.jpg','3.jpg','4.jpg','5.jpg']};

</script>

</head>

<body>

<div class="tide_photo"><img id="tide_photo_img" src=""></div>

<ul id="tide_photo_page"></ul>

</body>

<script>

if(tide_photos.items.length>1)

{

$("#tide_photo_img").attr("src",tide_photos.items[0]);

var page = "";

for(var i=0; i<tide_photos.items.length; i++){

page+='<li> '+(i+1)+'</li>';

}

$("#tide_photo_page").html(page);

$("#tide_photo_page li").click( function () {

var num = $(this).html()-1;

$("#tide_photo_img").attr("src",tide_photos.items[num]);

});

}

</script>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

js解析json的html页面 实现简单js特效

js解析json的html页面实现简单js特效