<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; color:#FFF;}
body{
background-color:#000;
}
#meadium{
margin-left:460px;
margin-top:60px;
}
#meadium-3{
margin-left:260px;
margin-top:60px;
}
</style>
</head>
<body>
<div id="meadium">
<div id="meadium-1">
<img src="images/jd_03.gif" width="368" height="24" />
</div>
<div id="meadium-2">
此套设计为广西桂林乐满地度假酒店方案设计，采用了现代简约风格与中式风格为主导的理念。整体以米黄色为主色，营造温暖的色调环境，压以重色调木饰面将整个空间<br/>赋予一种沉稳感。在大堂、大堂吧以及公共空间走廊区域等地方，运用直线将平面分割为几何造型，在沉稳中又凸显韵律动感，简单而不简约。宴会厅及会议室等空间则沿<br/>用现代中式风格，考虑到此酒店的经营模式，以中国风味来面向国际，寻求一个和谐的交融。
</div>
<div id="meadium-3">
<img id="zuo" src="images/bz_07.gif" width="24" height="18" />
01/09
<img id="you" src="images/bz_09.gif" width="25" height="18" />
</div>
</div>
</body>
</html>
效果是，打开时是文字，点击下面的左右键图片，上面的文字就变成其他的图片，随着图片变化，中间的数字也跟着变化，才开始学代码，求解答js代码怎么写div
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; color:#FFF;}
body{
background-color:#000;
}
#meadium{
margin-left:460px;
margin-top:60px;
}
#meadium-3{
margin-left:260px;
margin-top:60px;
}
</style>
</head>
<body>
<div id="meadium">
<div id="meadium-1">
<img src="images/jd_03.gif" width="368" height="24" />
</div>
<div id="meadium-2">
此套设计为广西桂林乐满地度假酒店方案设计，采用了现代简约风格与中式风格为主导的理念。整体以米黄色为主色，营造温暖的色调环境，压以重色调木饰面将整个空间<br/>赋予一种沉稳感。在大堂、大堂吧以及公共空间走廊区域等地方，运用直线将平面分割为几何造型，在沉稳中又凸显韵律动感，简单而不简约。宴会厅及会议室等空间则沿<br/>用现代中式风格，考虑到此酒店的经营模式，以中国风味来面向国际，寻求一个和谐的交融。
</div>
<div id="meadium-3">
<img id="zuo" src="images/bz_07.gif" width="24" height="18" />
01/09
<img id="you" src="images/bz_09.gif" width="25" height="18" />
</div>
</div>
</body>
</html>
效果是，打开时是文字，点击下面的左右键图片，上面的文字就变成其他的图片，随着图片变化，中间的数字也跟着变化，才开始学代码，求解答js代码怎么写div
$('#zuo').click(function(){
$('#meadium-1 img').attr('src','http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif');
$('#meadium-2').html('文字zuo文字zuo文字zuo文字zuo文字zuo文字zuo文字zuo文字zuo文字zuo文字zuo');
});
$('#you').click(function(){
$('#meadium-1 img').attr('src','https://www.google.com.hk/images/srpr/logo4w.png');
$('#meadium-2').html('文字you文字you文字you文字you文字you文字you文字you文字you文字you');
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; color:#FFF;}
body{
background-color:#000;
}
#meadium{
margin-left:460px;
margin-top:60px;
}
#meadium-3{
margin-left:260px;
margin-top:60px;}
</style>
<script type="text/javascript">
window.onload = function(){
var _left , _right , _total , _currentIndex = 1;
_left = getById('left');
_right = getById('right');
_total = parseInt(getById('total').innerHTML);
_left.onclick = function(){
if(_currentIndex > 1){
change({total : _total , currentIndex : --_currentIndex});
}
}
_right.onclick = function(){
if(_currentIndex < _total){
change({total : _total , currentIndex : ++_currentIndex});
}
}
function getById(_id){
return document.getElementById(_id);
}
function change(data){
for(var i = 1 ; i <= data.total ; ++i){
getById('content_' + i).style.display = 'none';
}
getById('currentIndex').innerHTML = data.currentIndex;
getById('content_' + (data.currentIndex)).style.display = 'block';
}
}</script>
</head>
<body>
<div id="meadium">
<!-- 第一个CONTENT -->
<div id="content_1">
<div>
<img src="1.jpg" width="368" height="24" />
</div>
<div>
此套设计为广西桂林乐满地度假酒店方案设计，采用了现代简约风格与中式风格为主导的理念。整体以米黄色为主色，营造温暖的色调环境，压以重色调木饰面将整个空间<br/>赋予一种沉稳感。在大堂、大堂吧以及公共空间走廊区域等地方，运用直线将平面分割为几何造型，在沉稳中又凸显韵律动感，简单而不简约。宴会厅及会议室等空间则沿<br/>用现代中式风格，考虑到此酒店的经营模式，以中国风味来面向国际，寻求一个和谐的交融。
</div>
</div>
<!-- 第一个CONTENT --> <!-- 第二个CONTENT -->
<div id="content_2" style="display:none">
<div>
<img src="2.jpg" width="368" height="24" />
</div>
<div>
模压ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<br/>赋予一种沉稳感。在大堂、大堂吧以及公共空间走廊区域等地方，运用直线将平面分割为几何造型，在沉稳中又凸显韵律动感，简单而不简约。宴会厅及会议室等空间则沿<br/>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
<!-- 第二个CONTENT --> <!-- 第三个CONTENT -->
<div id="content_3" style="display:none">
<div>
<img src="3.jpg" width="368" height="24" />
</div>
<div>
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br/>赋予一种沉稳感。在大堂、大堂吧以及公共空间走廊区域等地方，运用直线将平面分割为几何造型，在沉稳中又凸显韵律动感，简单而不简约。宴会厅及会议室等空间则沿<br/>ccccccccccccccccccccccccccccccccccccccccccccccc
</div>
</div>
<!-- 第三个CONTENT -->
<div id="meadium-3">
<img id="left" src="1.jpg" width="24" height="18" />
<span id="currentIndex">1</span>/<span id="total">3</span>
<img id="right" src="1.jpg" width="25" height="18" />
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; color:#FFF;}
body{
background-color:#000;
}
#meadium{
margin-left:460px;
margin-top:60px;
}
#meadium-3{
margin-left:260px;
margin-top:60px;}
</style>
<script type="text/javascript">
var k=0;
var arr=[];
function init(){
var x=document.getElementById("meadium-2").innerHTML;
var textNode=document.createTextNode(x);
arr.push(textNode);
var img1=document.createElement("img");
img1.src="u=3377829953,1380725767&fm=25&gp=0.jpg";
arr.push(img1);
}
function add(){
k++;
k=parseInt(k%arr.length);
var div=document.getElementById("meadium-2");
div.innerHTML="";
div.appendChild(arr[k]);
document.getElementById("num").innerHTML='0'+(k+1)+"//0"+arr.length;
}
function minus(){
k--;
k=parseInt(Math.abs(k%arr.length));
var div=document.getElementById("meadium-2");
div.innerHTML="";
div.appendChild(arr[k]);
document.getElementById("num").innerHTML='0'+(k+1)+"//0"+arr.length;
}
window.onload=init;
</script>
</head>
<body>
<div id="meadium">
<div id="meadium-1">
<img src="u=3377829953,1380725767&fm=25&gp=0.jpg" width="368" height="24" />
</div>
<div id="meadium-2">
此套设计为广西桂林乐满地度假酒店方案设计，采用了现代简约风格与中式风格为主导的理念。整体以米黄色为主色，营造温暖的色调环境，压以重色调木饰面将整个空间<br/>赋予一种沉稳感。在大堂、大堂吧以及公共空间走廊区域等地方，运用直线将平面分割为几何造型，在沉稳中又凸显韵律动感，简单而不简约。宴会厅及会议室等空间则沿<br/>用现代中式风格，考虑到此酒店的经营模式，以中国风味来面向国际，寻求一个和谐的交融。
</div>
<div id="meadium-3">
<input type="button" value="<-" onclick="minus()">;
<p id="num">01/02</p>
<input type="button" value="->" onclick="add()">;
</div>
</div>
</body>
</html>
大体这也试试