HTML怎么实现这种梯形轮播

如题所述

纯HTML是实现不了这种效果的，需要JS事件效果配合，给你一个案例吧，代码比较复杂

先看下效果图：

完整的 HTML代码：

<div class="lb_gl">
<div class="container">

<div class="pictureSlider poster-main">
<div class="poster-btn poster-prev-btn"></div>
<ul id="zturn" class="poster-list">
<li class="poster-item  zturn-item" >
<p class="xxgy">学员感言1</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a1.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>

<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item">
<p class="xxgy">学员感言2</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a2.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item">
<p class="xxgy">学员感言3</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a3.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item" >
<p class="xxgy">学员感言4</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a4.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a5.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>
<li class="poster-item  zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a1.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a2.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a3.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a4.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/xueyuan.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

<li class="poster-item zturn-item">
<p class="xxgy">学员感言</p>
<p class="say">明月几时有</p>
<div class="for_btn">
<img src="img/a5.png" width="100%">
<a href="#" class="in_page"><img src="images/iconin.png" /></a>
</div>
<div class="students_star">
<p class="cell_list"><span class="lf">姓名：<span class="darks">小明</span></span> <span class="rt">薪资 ：<span class="darks">15k</span></span>
</p>
<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>
</p>
<div class="zwjs">
自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好
</div>
</div>
</li>

</ul>

</div>
</div>

</div>

需要引入的css：

格式化样式css

body{font-family: microsoft yahei,Arial;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,ol,li,ul,p,dl,dt,dd{padding: 0;margin:0}
ul,ol,li,dl,dt,dd{text-decoration: none;list-style: none}
.lf{float: left}
.rt{float: right}
.clear{clear:both}
.ovh{overflow: hidden}
a{  color:#303030;  text-decoration:none;  }
a:hover{  text-decoration:none;  }
input{border:none;outline:none;}
img{border:none}

轮播效果css：

/*轮播*/
.lb_gl{margin-bottom: 30px;background: url(../images/bg_3d.png);background-size: 100% 100%;height:725px ;}
.container{width: 1024px;margin:0 auto;position: relative;}
.pictureSlider{height: 518px;margin-bottom: 24px;}
.poster-item{background: #fff;height: 453px;width:336px;border-radius: 10px;padding:45px 23px 20px 23px;
transition: all 0.5s;cursor: default;
-moz-transition: all 0.5s;cursor: default;
-webkit-transition: all 0.5s;cursor: default;
-o-transition: all 0.5s;cursor: default;
}
.turn_3d{text-align: center;color: #fff;font-weight: 400;font-size: 36px;padding: 28px 0;}
.xxgy{font-size: 30px;font-weight: 900;padding-left: 10px;}
.poster-item .say{font-size: 18px;margin-bottom: 5px;padding-left: 10px;}
.students_star{padding:10px 10px 0 10px ;}
.cell_list{margin-bottom: 20px;color:#999;font-size: 18px;overflow: hidden;}
.darks{color: #000;padding-left: 10px;}
.zwjs{border-top:1px solid #d0cddb;line-height: 26px;padding-top: 5px;color: #999;font-size: 12px;max-height: 84px;overflow: hidden;}
.for_btn{position: relative;height:214px;overflow:hidden}
.in_page{position: absolute;left: 50%;top:50%;width:40px;height: 40px;margin-left: -20px;margin-top: -20px;}
.in_page>img{width: 40px;height: 40px;}

.check_more{width: 180px;height: 50px;line-height: 50px;text-align: center;color:#fff;background: #bc241d;margin:0 auto;display: block;}

需要引入的JS：

轮播控制器JavaScript，这段js引入需要jQuery的支持，所以先引入它。

 (function(win,doc,undefined){
  var zturn=function(turn){
  this.turn=turn
  this.zturn=$("#"+turn.id)
  this.X=0
  this.zturnitem=this.zturn.children(".zturn-item")
  this.num_li=this.zturnitem.length//轮播元素个数 zturnPy为每个的偏移量
  this.zturnPy=turn.Awidth/(this.num_li-1)  
  this.init()
  this.turn_()
  return this
  }
  zturn.prototype={
  constructor:zturn,
   init:function(){
    var _self = this;
this.zturn.children(".zturn-item").each(function(index,element){  
//index是第几个元素 X是选取的中间数 num_li是总数
var rt=1//1:右侧：-1：左侧
if((index-_self.X)>_self.num_li/2||(index-_self.X)<0&&(index-_self.X)>(-_self.num_li/2)){rt=-1}//判断元素左侧还是右侧
var i=Math.abs(index-_self.X);//取绝对值
if(i>_self.num_li/2){i=parseInt(_self.X)+parseInt(_self.num_li)-index;}//i:是左或者右的第几个
if((index-_self.X)<(-_self.num_li/2)){i=_self.num_li+index-_self.X}
$(this).css({
'position':'absolute',
'left': '50%',
'margin-left':-_self.turn.width/2+_self.zturnPy*rt*i+"px",
'z-index':_self.num_li-i, 
'opacity': Math.pow(_self.turn.opacity,i),
'transform':'scale('+Math.pow(_self.turn.scale,i)+')',
'-webkit-transform':'scale('+Math.pow(_self.turn.scale,i)+')',
'-webkit-transform':'scale('+Math.pow(_self.turn.scale,i)+')',
'-moz-transform':'scale('+Math.pow(_self.turn.scale,i)+')',
'-ms-transform':'scale('+Math.pow(_self.turn.scale,i)+')',
'-o-transform':'scale('+Math.pow(_self.turn.scale,i)+')'
})
$(this).attr("data_n",index)
})
   },
   turn_:function(){
    var _self=this
    this.zturnitem.click(function(){  
    _self.X=$(this).attr("data_n")
    _self.init()
    })
   },
   prev_:function(){
    var _self=this
    this.X--
if(this.X<0){this.X=this.num_li-1}
    this.init()
   },
  next_:function(){
    var _self=this
    this.X++
if(this.X>=this.num_li){this.X=0}
    this.init()
   }
  } 
  win.zturn = zturn;
 }(window,document))

最后在线面加入最后一段js

var aa=new zturn({
id:"zturn",
opacity:0.9,
width:382,
Awidth:1024,
scale:0.9
})
var ab=new zturn({
id:"zturn2",
opacity:0.8,
width:382,
Awidth:1024,
scale:0.6
})

最后案例中的图片就不提供了

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/pqfvpm7p27qsv8fppp7.html