JQ轮播主体结构
三层结构
最外层:一个div盒子,给定宽度,也可以后期通过js给宽度,并添加有overflow:hidden属性,因为这是轮播的区域,而轮播的总宽度大于此宽度
第二层:也是个div盒子,这是轮播内容的直接父级,此盒子的宽度不给(或者给定一个足够大的宽度,如:99999px),没给宽度的情况下,通过js,根据轮播内容动态的给予宽度,此盒子需要定位(position:relative)
最内层:多个所需轮播的div盒子,此盒子给定宽度,或者不给宽度由内容撑宽,需要给浮动,或者在第二层给属性display:flex,使用flex布局
**注意**:如果要写无缝轮播,需要将第一个轮播盒子,也在最后复制一次
无缝轮播演示
html:
<div class="outer"> <!-- 最外层 -->
<div class="inner"> <!-- 第二层 -->
<!-- 最内层 -->
<div>
<img src=