可以先把1-12的图先放入json,然后点不同月份时,就可以直接从json中读取,不用再请求php了。
参考下,点1,2月就能出不同月份的图。<?php
$monthImg = array(
array('http://a.hiphotos.baidu.com/image/w%3D310/sign=1161b178b019ebc4c0787098b226cf79/7af40ad162d9f2d33f7caaf2aaec8a136327ccba.jpg','http://f.hiphotos.baidu.com/image/w%3D310/sign=78b17996922397ddd6799e056983b216/b58f8c5494eef01f27a058b4e3fe9925bc317d0e.jpg'),
array('http://g.hiphotos.baidu.com/image/w%3D310/sign=8f51359ace11728b302d8a23f8fcc3b3/d01373f082025aaffa5ec4c0f8edab64034f1a48.jpg','http://g.hiphotos.baidu.com/image/w%3D310/sign=8f85cacc81025aafd33278cacbecab8d/9f2f070828381f30b7b201a5aa014c086e06f017.jpg')
);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> New Document </title>
</head> <body>
<script type="text/javascript">
var monthImg = <?php echo json_encode($monthImg); ?>;
function change(c){
var tmp = '';
for(var i=0; i<monthImg[c].length; i++){
tmp += '<img src="' + monthImg[c][i] + '">'
}
document.getElementById("show").innerHTML = tmp;
}
</script><?php
for($i=0; $i<count($monthImg); $i++){
echo '<a href="javascript:;" onclick="change('.$i.')">'.($i+1).'月</a><br>';
}
?>
<div id="show"></div>
</body>
</html>
参考下,点1,2月就能出不同月份的图。<?php
$monthImg = array(
array('http://a.hiphotos.baidu.com/image/w%3D310/sign=1161b178b019ebc4c0787098b226cf79/7af40ad162d9f2d33f7caaf2aaec8a136327ccba.jpg','http://f.hiphotos.baidu.com/image/w%3D310/sign=78b17996922397ddd6799e056983b216/b58f8c5494eef01f27a058b4e3fe9925bc317d0e.jpg'),
array('http://g.hiphotos.baidu.com/image/w%3D310/sign=8f51359ace11728b302d8a23f8fcc3b3/d01373f082025aaffa5ec4c0f8edab64034f1a48.jpg','http://g.hiphotos.baidu.com/image/w%3D310/sign=8f85cacc81025aafd33278cacbecab8d/9f2f070828381f30b7b201a5aa014c086e06f017.jpg')
);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title> New Document </title>
</head> <body>
<script type="text/javascript">
var monthImg = <?php echo json_encode($monthImg); ?>;
function change(c){
var tmp = '';
for(var i=0; i<monthImg[c].length; i++){
tmp += '<img src="' + monthImg[c][i] + '">'
}
document.getElementById("show").innerHTML = tmp;
}
</script><?php
for($i=0; $i<count($monthImg); $i++){
echo '<a href="javascript:;" onclick="change('.$i.')">'.($i+1).'月</a><br>';
}
?>
<div id="show"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"type="text/javascript"></script>
<script type="text/javascript">
var url="http://localhost/orange/image.php";
var sending = false;
$(document).ready(function(){
$("li[month]").click(function(){
if(sending) return;
var $me = $(this);
var $imageContainer = $("#ul_image_container");
var request = {month:$me.attr("month")};
$.post(url,request,function(data){
if(data.ret != 1){
alert("数据错误");
}
$imageContainer.empty();
$("li[month]").removeClass("select");
$("li[month="+request["month"]+"]").addClass("select");
for(var i=0;i<data.images.length;i++){
$imageContainer.append('<li><img src="'+data.images[i]+'" /></li>');
}
},"json")
.fail(function(){alert("网址不通或者PHP脚本出错");})
.always(function(){
sending = false;
});
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;clear:both;}
ul li{float:left;cursor:pointer;margin-left:20px}
ul li.select{background-color:#00ff00;}
</style>
</head>
<body>
<div class="month_left">
<ul id="ul_month_choose">
<li month="1">1月</li>
<li month="2">2月</li>
<li month="3">3月</li>
<li month="4">4月</li>
<li month="5">5月</li>
<li month="6">6月</li>
<li month="7">7月</li>
<li month="8">8月</li>
<li month="9">9月</li>
<li month="10">10月</li>
<li month="11">11月</li>
<li month="12">12月</li>
</ul>
</div>
<p />
<div>
<ul id="ul_image_container">
</ul>
</div>
</body>
</html>//image.php<?php
$images =array(
1=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg","http://avatar.csdn.net/8/6/B/2_orangeholic.jpg"),
2=>array("http://avatar.csdn.net/6/C/F/1_qq_20527767.jpg"),
3=>array("http://avatar.csdn.net/6/C/F/1_qq_20527767.jpg","http://avatar.csdn.net/8/6/B/2_orangeholic.jpg","http://avatar.csdn.net/8/6/B/2_orangeholic.jpg"),
4=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg","http://avatar.csdn.net/6/C/F/1_qq_20527767.jpg"),
5=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg"),
6=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg","http://avatar.csdn.net/6/C/F/1_qq_20527767.jpg"),
7=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg","http://avatar.csdn.net/6/C/F/1_qq_20527767.jpg","http://avatar.csdn.net/6/C/F/1_qq_20527767.jpg"),
8=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg"),
9=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg"),
10=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg"),
11=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg"),
12=>array("http://avatar.csdn.net/8/6/B/2_orangeholic.jpg","http://avatar.csdn.net/6/C/F/1_qq_20527767.jpg")
);
$result = array('ret'=>0,'images'=>array());$month = intval($_POST['month']);if(!empty($images[$month])){
$result['ret'] = 1;
$result['images'] = $images[$month];
}echo json_encode($result);效果如下图
你修改修改 适配你的html
参数就是月份,调用change的参数i
for($i=0; $i<count($monthImg); $i++){
echo '<a href="javascript:;" onclick="change('.$i.')">'.($i+1).'月</a><br>';
}