<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 这个是水平位置，图片插入进去没居中的，亲们就慢慢增加或者减少数字，就可以调到居中的哈。有什么问题再密我。
1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
<div class="div1"><div class="div2">
<p>111111111111111111111</p>
<p>211111111111111111111</p>
<p>311111111111111111111</p>
<p>411111111111111111111</p>
<p>511111111111111111111</p>
<p>611111111111111111111</p>
<p>711111111111111111111</p>
<p>2211111111111111111111</p>
<p>331111111111111111111</p>
<p>441111111111111111111</p>
<p>551111111111111111111</p>
<p>661111111111111111111</p>
<p>771111111111111111111</p>
<p>881111111111111111111</p>
<p>991111111111111111111</p>
<p>001111111111111111111</p>
</div>
</div> .div1 {
width:200px
height:200px
overflow:hidden
margin:auto
position:relative
}
@keyframes anis {
100% {
transform:translateY(-200px)
}
}img {
position:absolute
}
.div2 {
animation:anis 10s linear infinite
}
.div2:hover {
animation-play-state:paused
}
