请问这个效果该怎么写代码


请问这个效果该怎么写代码，就是点击下面的左右键，上面的文字切换成图片，然后数字也跟着变化

解决方案 »

  1.   

    你可以设置div的z-index属性 让div轮流的处在最上方
    或者动态的修改那个div的子元素试试
      

  2.   


    <!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>