CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）

html-css0189

CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）,第1张

简单demo：使用HTML+CSS 实现轮播图（三张图为例，分别为：红、绿、蓝）的效果。

不能发视频，截图来代替吧

1.显示 轮播图1（实际轮播的第2个元素li）

2.显示 轮播图2（实际轮播的第3个元素li）

3.显示 轮播图3（实际轮播的第4个元素li）

4.显示 轮播图1（实际轮播的第5个元素li,之后会紧跟着重复以上动作）

<div class="J_TWidget mypoper" data-widget-config="{'effect': 'fade','circular': true ,'contentCls':'sj-t','navCls':'sj-n','autoplay':'true'}" data-widget-type="Tabs" style="padding-bottom:0pxmargin:0pxpadding-left:0pxpadding-right:0pxheight:600pxoverflow:hiddenpadding-top:0px">

<div class="sj-t">

<div class="J_TWidget" data-widget-config="{'contentCls': 'sj-content','navCls': 'sj-n','triggerType': 'click','effect': 'fade','steps': 1,'autoplay': true,'circular': true ,'prevBtnCls':'prev','nextBtnCls':'next'}" data-widget-type="Carousel">

<div class="pa2">

<div class="J_TWidget" data-widget-config="{'trigger':'.sj-content', 'align':{'node':'.mypoper', 'offset':[0,0], 'points':['cl','cl'] } }" data-widget-type="Popup" style="width:950pxdisplay:none">

<div class="ks-contentbox" style="padding-bottom:0pxmargin:0pxpadding-left:0pxwidth:950pxpadding-right:0pxpadding-top:0pxleft:0px">

<div class="prev" style="float:leftmargin-left:50px">

<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1pxwidth:1px" /></div>

<div class="next" style="float:rightmargin-right:50px">

<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1pxwidth:1px" /></div>

</div>

</div>

<ul class="sj-content" style="padding-bottom:0pxmargin:0pxpadding-left:0pxwidth:1440pxpadding-right:0pxheight:600pxoverflow:hiddenpadding-top:0px">

<li style="padding-bottom:0pxlist-style-type:nonemargin:0pxpadding-left:0pxwidth:1440pxpadding-right:0pxheight:600pxpadding-top:0pxleft:-250px">

<a target="_blank"><img data-ks-lazyload="

图片地址" /></a></li>

<li style="padding-bottom:0pxlist-style-type:nonemargin:0pxpadding-left:0pxwidth:440pxpadding-right:0pxheight:600pxpadding-top:0pxleft:-250px">

<a target="_blank"><img data-ks-lazyload="

图片地址" /></a></li>

</ul>

</div>

<div style="width:1920pxdisplay:noneheight:0pxoverflow:hidden">

<ul class="sj-t" style="padding-bottom:0pxmargin:0pxpadding-left:0pxwidth:1440pxpadding-right:0pxheight:50pxpadding-top:0px">

<li style="padding-bottom:0pxlist-style-type:nonemargin:0pxpadding-left:0pxwidth:315pxpadding-right:0pxbackground:blackfloat:leftheight:600pxpadding-top:0px">

</li>

<li style="padding-bottom:0pxlist-style-type:nonemargin:0pxpadding-left:0pxwidth:315pxpadding-right:0pxbackground:#F8Cfloat:leftheight:8600pxpadding-top:0px">

</li>

</ul>

</div>

<ul class="sj-n" style="padding-bottom:0pxmargin:0pxpadding-left:0pxpadding-right:0pxdisplay:noneheight:1pxpadding-top:0px">

单词解释： width:1440px 这个是图片宽度，亲们可以自己设置多少。

height:600px 这个是图片高度，也是亲们自己设置。

left:-250px 这个是水平位置，图片插入进去没居中的，亲们就慢慢增加或者减少数字，就可以调到居中的哈。有什么问题再密我。