<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 这个是水平位置，图片插入进去没居中的，亲们就慢慢增加或者减少数字，就可以调到居中的哈。有什么问题再密我。
简单demo：使用HTML+CSS 实现轮播图（三张图为例，分别为：红、绿、蓝）的效果。
不能发视频，截图来代替吧
1.显示 轮播图1（实际轮播的第2个元素li）
2.显示 轮播图2（实际轮播的第3个元素li）
3.显示 轮播图3（实际轮播的第4个元素li）
4.显示 轮播图1（实际轮播的第5个元素li,之后会紧跟着重复以上动作）
animation-name： 规定需要绑定到选择器的 keyframe 名称。animation-duration： 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function： 规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count： 规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
@keyframes{
}
给每个动画及暂停分配时间，按照总时间的百分比分配；
以三张图片为例制作轮播图，若将最后的数值设置为100%，出现问题在于最后一张到第一张的切换没有动画；尝试给最后一张图片到第一张图片的动画时间，但是中间的切换效果是从最后一张向右滑动直到显示出第一张图，其效果反人类，不美观；但是，通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
方法与一中大致相同，唯一更改的地方是css3的@keyframes规则里面的内容
若只将要显示的三张图片导入，会出现最后一张图片到第一张图片没有动画效果；通过尝试在最后的一张图片后面在添加一张与第一张相同的图片，可实现循环的效果；
问题在于图片一直处于切换状态，中间没有停顿；
