<script type="text/javascript" src="http://xuan.news.cn/cloudnews/xhcms_2014/js/jquery.min.js"></script>

<style>
.turn-waper {
 /* width:648px; */
  width:100%;
  height: auto;
  background: #111;
  margin: 10px 0;
  position: relative;
  box-shadow: 0px 0px 5px #000;
}
.turn-waper .arrow-left {
  /*background: url(img/arrows.png) no-repeat left top;*/
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
}
.turn-waper .arrow-right {
  /*background: url(img/arrows.png) no-repeat left top;*/
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 17px;
  height: 30px;
}
.lb-container {
  height: 400px;
  width: 100%;
}
.content-slide {
  padding: 20px;
  color: #fff;
}
.title {
  font-size: 25px;
  margin-bottom: 10px;
}
.pagination {
  position: absolute;
  left: 0;
  text-align: center;
  bottom:5px;
  width: 100%;
  z-index:99;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 48px;
  height: 8px;
  background: #FFF;
  margin: 0 3px;
  cursor: pointer;
  opacity: 0.5; /* for IE9 and other browsers */
  filter: alpha(opacity=50); /* for IE8 and earlier */
}
.swiper-active-switch {
  opacity: 1; /* for IE9 and other browsers */
  filter: alpha(opacity=100); /* for IE8 and earlier */  
}
.swiper-item{
  position:relative;
}
.lb-img{
  display:block;
  width:100%;
  height:auto;
}
.lb-logo{
  position:absolute;
  bottom:0;
  width:106px;
  height:106px;
}

.slide-bottom-waper{
  position:absolute;
  bottom:0;
  width:100%;
  height:106px;
}
.slide-bottom-bg{
  position:absolute;
  left:106px;
  width:542px;
  height:100%;
  /*
  background-color:#000;
  opacity: 0.5; 
  filter: alpha(opacity=50);
  */
}
.lb-news-title{
  position:absolute;
  padding:0 20px;
  left:106px;
  top:20px;
  width:500px;
  height:60px;
  line-height:60px;
  font-size:30px;
  font-weight:600;
  color:#FFF;
  /*background-color:#FFF;*/
  
}

@media screen and (max-width:640px){
.slide-bottom-waper{
}
.slide-bottom-bg{
  left:0;
  width:100%;
  height:100%;
}
.lb-news-title{
  position:absolute;
  left:0;
  padding:0 5%;
  top:55px;
  width:90%;
  height:30px;
  line-height:30px;
  font-size:22px;
  font-weight:600;
  color:#FFF;
  /*background-color:#FFF;*/
  
}   


</style>


<link rel="stylesheet" href="../../src/list/list.css">


<link rel="stylesheet" href="../../src/public/swiper2/css/idangerous.swiper.css">
<script src="../../src/public/swiper2/js/idangerous.swiper.min.js"></script>

<div class="list"></div>
  <div class="turn-waper">
    <a class="arrow-left" href="#"></a> 
    <a class="arrow-right" href="#"></a>
    <div class="swiper-container lb-container">
      <div class="swiper-wrapper swiper-lists">
        <div class="swiper-slide swiper-item clearfix"> 
          <img src="../../images/list/news1.jpg" class="lb-img">
          <div class="slide-bottom-waper">
            <img src="../../images/list/lb-logo.png" alt="" class="lb-logo">
            <div class="slide-bottom-bg"></div>
            <div class="lb-news-title ellipsis" title="題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題20">題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題20</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination"></div>
  </div>



 
 <script>
  /*初始化swiper*/
  console.log($)
  var mySwiper = new Swiper('.lb-container',{
    pagination: '.pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true
  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
  })
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
  });
 
   


   var resizeLb = function(){
    $(".lb-container").height($(".lb-container").find(".lb-img").eq(0).height())

    console.log($(".lb-container").find(".lb-img").eq(0).height())

   }

   resizeLb();
   window.onresize = function(){resizeLb()};

  </script>