简单的HTML+js图片轮播?_随笔

h5代码：

</ul>

</div>

css代码：

@-webkit-keyframes move{

0%{left:-500px}

100%{left:0}

}

#wrap{width:600pxheight:130pxborder:1px solid #000position:relativemargin:100px auto

overflow: hidden}

#list{position:absoluteleft:0top:0padding:0margin:0

-webkit-animation:5s move infinite linearwidth:200%}

#list li{list-style:nonewidth:120pxheight:130pxborder:1px solid redbackground: pink

color:#ffftext-align: centerfloat:leftfont:normal 50px/2.5em '微软雅黑'}

#wrap:hover #list{-webkit-animation-play-state:paused}

</style>

扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

animation-name：规定需要绑定到选择器的 keyframe 名称。

animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function：规定动画的速度曲线。

animation-delay：规定在动画开始之前的延迟。

animation-iteration-count：规定动画应该播放的次数。

animation-direction：规定是否应该轮流反向播放动画。

@keyframes{

}

给每个动画及暂停分配时间，按照总时间的百分比分配；

以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；

方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容

若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；

问题在于图片一直处于切换状态，中间没有停顿；

纯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

})

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

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

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

简单的HTML+js图片轮播?

发表评论

评论列表（0条）