HTML怎么实现这种梯形轮播

HTML怎么实现这种梯形轮播,第1张

纯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,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)+')',

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

})

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

<script>

window.onload = function(){ //页面加载完成执行

var images = document.getElementsByTagName('img')//取得所有img图片

var pos = 0//定义pos变量初始值=0

var len = images.length//取得图片个数

setInterval(function(){//定每1秒时执行

images[pos].style.display = 'none'//第一个图片隐藏,

pos = ++pos == len ? 0 : pos//pos在图片个数范围内递增

images[pos].style.display = 'inline'//下一个图片显示

},1000)

}

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6226939.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存