HTML怎么实现这种梯形轮播_随笔

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

先看下效果图：

完整的 HTML代码：

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

<p class="say">明月几时有</p>

</div>

</p>

<p class="cell_list"><span>入职：<span class="darks">把酒问青天</span></span>

</p>

自我介绍是向别人展示你自我介绍好不好,甚至直接关系到你给别人的第一印象的好坏及以后自我介绍是向别人展示你自我介绍好不好

</div>

</li>

</ul>

</div>

需要引入的css：

格式化样式css

body{font-family: microsoft yahei,Arialmargin:0padding:0}

h1,h2,h3,h4,h5,h6,ol,li,ul,p,dl,dt,dd{padding: 0margin:0}

ul,ol,li,dl,dt,dd{text-decoration: nonelist-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:noneoutline:none}

img{border:none}

轮播效果css：

/*轮播*/

.lb_gl{margin-bottom: 30pxbackground: url(../images/bg_3d.png)background-size: 100% 100%height:725px }

.container{width: 1024pxmargin:0 autoposition: relative}

.pictureSlider{height: 518pxmargin-bottom: 24px}

.poster-item{background: #fffheight: 453pxwidth:336pxborder-radius: 10pxpadding:45px 23px 20px 23px

transition: all 0.5scursor: default

-moz-transition: all 0.5scursor: default

-webkit-transition: all 0.5scursor: default

-o-transition: all 0.5scursor: default

}

.turn_3d{text-align: centercolor: #ffffont-weight: 400font-size: 36pxpadding: 28px 0}

.xxgy{font-size: 30pxfont-weight: 900padding-left: 10px}

.poster-item .say{font-size: 18pxmargin-bottom: 5pxpadding-left: 10px}

.students_star{padding:10px 10px 0 10px }

.cell_list{margin-bottom: 20pxcolor:#999font-size: 18pxoverflow: hidden}

.darks{color: #000padding-left: 10px}

.zwjs{border-top:1px solid #d0cddbline-height: 26pxpadding-top: 5pxcolor: #999font-size: 12pxmax-height: 84pxoverflow: hidden}

.for_btn{position: relativeheight:214pxoverflow:hidden}

.in_page{position: absoluteleft: 50%top:50%width:40pxheight: 40pxmargin-left: -20pxmargin-top: -20px}

.in_page>img{width: 40pxheight: 40px}

.check_more{width: 180pxheight: 50pxline-height: 50pxtext-align: centercolor:#fffbackground: #bc241dmargin:0 autodisplay: 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)+')',

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

})

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

border-top: 100px solid red

border-right: 37px solid transparent

知识点：border-width:上下左右

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/6100601.html

HTML怎么实现这种梯形轮播

发表评论

评论列表（0条）