显示与隐藏的朗目图

1、HTML结构代码如下：

<div class="wrapper">
     <ul class="wrapUl" >
         <li>
             <div class="title">
                 <h1>温泉酒店</h1>
             </div>
             <div class="picBox picBox1"></div>
             <div class="decration">有谁不爱泡温泉？浸入雾气蒸腾的泉水之中，把身体泡成一片茶叶，舒展轻盈。有比这更美妙的感觉吗？</div>
         </li>
         <li>
             <div class="title">
                 <h1>时尚酒店</h1>
             </div>
             <div class="picBox picBox2"></div>
             <div class="decration">浪漫，是香闺围笼，是灯火迷离，泪眼婆裟的唯美，是杨柳岸、晓风残月中的无语凝噎……</div>
         </li>
         <li>
             <div class="title">
                 <h1>设计师酒店</h1>
             </div>
             <div class="picBox picBox3"></div>
             <div class="decration">前卫的酒店设计理念，独具魅力的风格，优美的自然风光才能有这样顶级的酒店</div>
         </li>
         <li>
             <div class="title">
                 <h1>青年旅店</h1>
             </div>
             <div class="picBox picBox4"></div>
             <div class="decration">我为你煮一杯温茶，斟一杯美酒。让我们席地而坐，听你的梦想。用你的只言片语装点我们的梦想博物馆</div>
         </li>
         <li>
             <div class="title">
                 <h1>民宿客栈</h1>
             </div>
             <div class="picBox picBox5"></div>
             <div class="decration">在这里，你可以静静发呆，而不被人打扰；在这里，你能看见最美好的星星，能让你找到最深的感动</div>
         </li>
         <li>
             <div class="title">
                 <h1>海岛酒店</h1>
             </div>
             <div class="picBox picBox6"></div>
             <div class="decration">不想过冬，厌倦沉重，就飞去热带的岛屿游泳，卸下包袱，放下压力，在这碧海蓝天之中</div>
         </li>
         <li>
             <div class="title">
                 <h1>海外酒店</h1>
             </div>
             <div class="picBox picBox7"></div>
             <div class="decration">因地形地质的区别，世界各地的温泉也千差万别，选择一处适合自己的温泉，你会忘记世界</div>
         </li>
     </ul>
 </div>

2、修饰最外面的盒子css代码

 .wrapper{
    width:80%;padding:40px;
    margin:50px auto;/*左右居中，上下边距50px*/
}
.wrapper ul{
    width:100%;height:300px;
    overflow: hidden;/*超出隐藏*/
}
.wrapper ul li{
    float: left;width:14.2%;height:260px;
    position:relative;/*相对定位*/
    overflow:hidden;/*超出隐藏*/
    cursor:pointer;/*箭头变手*/    
}

3、给每个盒子添加相背景图片

.picBox{
    width:100%;height:100%;
}
.picBox1 {/*背景图片设置为不重复，居中*/
    background: url(../../Content/images/1.jpg) no-repeat center ;
}
.picBox2{/*背景图片设置为不重复，居中*/
    background:url(../../Content/images/2.jpg) no-repeat center ;
}
.picBox3{/*背景图片设置为不重复，居中*/
    background:url(../../Content/images/3.jpg) no-repeat center ;
}
.picBox4{/*背景图片设置为不重复，居中*/
    background:url(../../Content/images/4.jpg) no-repeat center ;
}
.picBox5{/*背景图片设置为不重复，居中*/
    background:url(../../Content/images/5.jpg) no-repeat center ;
}
.picBox6{/*背景图片设置为不重复，居中*/
    background:url(../../Content/images/6.jpg) no-repeat center ;
}
.picBox7{/*背景图片设置为不重复，居中*/
    background:url(../../Content/images/7.jpg) no-repeat center ;
}

4、修饰文字代码

.wrapper ul li .title{/*标题盒子的设置*/
   position:absolute;/*绝对定位*/
   overflow:hidden;/*超乘隐藏*/
   width:100%;height:100%; left:0;top:0;
   background:rgba(0,0,0,0.5);/*背景透明*/
}
.wrapper ul li .title h1{/*标题的设置*/
   color:#fff;width:30px;
   margin:0 auto;/*左右居中*/
   display:block;/*显示块级元素*/
   font:20px;padding-top:30px;
   opacity:0.8;/*字体的透明度*/
}
.wrapper ul li .decration{/*长文字的设置*/
   width:400px;height:40px;
   padding-left:20px;padding-right:30px;         
   position:absolute;left:0;bottom:-50px;
   background:rgba(0,0,0,0.3);color:#FFF; 
}

5、js代码获取与打击事件

 var oUl = $('ul'),//获取ul元素
     oLi = $('li'),//获取li元素
     len = oLi.length,//获取li的长度值
     width = parseInt(oUl.css('width')),//获取uld的宽度，并返回整数            
     //Math.floor返回小于或等于一个给定数字的最大整数
     ot = Math.floor((width - 400) / (len - 1));
 //加载进来第四张相片展开
 flag = true;//一开始设置为true
 function init() {
     if (flag) {
         //change改变函数
         change($(oLi[len - 4]));
     }
 }
 //点击相片事件
 function bindEvent() {
     oLi.on('click', function () {
         change($(this));
         if (($(this).index() + 1) == len) {
             flag = false;
         } else {
             flag = true;
         }
     });    
 }

6、js代码进行判断隐藏还是显示图片功能
animate()方法执行CSS属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
siblings() 方法返回被选元素的所有同级元素
find()搜索所有段落中的后代

function change(event) {
     event.animate({
         'width': '400px'
     }, 300, 'linear').siblings().animate({
         'width': ot + 'px'
     }, 300, 'linear');
     //find搜索所有段落中的后代 title 元素，并将其隐藏
     event.find('.title').css({
         'display': 'none'
     })
     //查找siblings()方法返回被选的title元素，并将其显示
     event.siblings().find('.title').css({
         'display': 'block'
     })
     event.find('.decration').css({
         'bottom': '0px'
     })
     event.siblings().find('.decration').css({
         'bottom': '-50px'
     })
 }
init();//必须调用的方法
bindEvent();//必须调用的方法

7、效果图