JQ无缝轮播分享,极简版

JQ轮播主体结构

三层结构

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

无缝轮播演示

html:
<div class="outer">    <!-- 最外层 -->
	<div class="inner">   <!-- 第二层 -->
		<!-- 最内层 -->
		<div>
			<img src=
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值