简单的轮播实现
1.在google上找一些图片
2.用class = window的div包起来, window就是用户的可视区域, 设置overflow: hidden遮住其他图片
- 用css flex横屏
.images{
display:flex;
align-items: flex-start;
}
设置按钮
使用jQuery
不管多少内容都可以滚动:
var allButtons = $('#buttons > span')
for(let i = 0; i<allButtons.length;i++){
$(allButtons[i]).on('click', function(x){
var index = $(x.currentTarget).index()
console.log(index)
var n = index * -300
$('#images').css({
transform: 'translate('+n+'px)'
})
})
}
问题: 第二张图会闪动?
原因是因为放大了页面
可以使用margin-left解决
重排 页面性能优化:
如果知道图片宽高,最好写在上面,浏览器少一次让位的过程
<img src="xxx.jpg" width = 300 alt="">
防止页面后面的元素往后退
image.png
无限轮播的实现
- 首先无限轮播的元素都是水平排列，窗口是用户可见的部分
超出窗口的都隐藏. - 对于不是首位元素，改变定位后的元素left值或者改变translateX
- 如下图, 如果我们点击上一张,从第一张到第四张图, 我们需要复制最后一张图到第一张前面来实现无缝切换.
- 复制的第四张图在切换之后通过jQuery再移动到第四张图
- 把元素回归到正确的位置，方便用户继续点击
image
结尾
如今, 大多数的程序都不会自己写轮播图, 因为太麻烦了, 建议大家还是使用Swipe Demo上的轮播图
Swipe各种风格的轮播图
